<template>
  <div tabindex="-1" class="tab_panel">
    <!-- 显示库内容(包含的表展示) -->
    <div class="dbTable" v-if="content.tabType == 'object'">
      <div>
        <div class="icon">
          <div>
            <!-- <el-button size="mini" type="primary" icon="el-icon-finished">文本</el-button> -->
            <el-button
              size="mini"
              disabled
              type="primary"
              icon="el-icon-finished"
            ></el-button>

            <div style="float: right">
              <el-input
                size="mini"
                clearable
                v-model="search_text"
                @keyup.enter.native="searchText"
                @input="checkSearchText"
                placeholder="请输入内容"
                suffix-icon="el-icon-search"
              >
                <!-- <el-button
                  size="mini"
                  slot="append"
                  icon="el-icon-search"
                  @click="searchText"
                ></el-button> -->
              </el-input>
            </div>
          </div>
          <div v-if="content.tabType == 'sql'">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-finished"
              @click="runSql"
              >执行</el-button
            >
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-finished"
              @click="format"
              >格式化SQL</el-button
            >
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-finished"
              @click="compression"
              >压缩SQL</el-button
            >
          </div>
        </div>
        <div v-if="content.tabType == 'table'">
          <!-- 筛选 -->
          <div></div>
          <!-- 排序 -->
          <div v-if="showOrderByFlog"></div>
        </div>
      </div>

      <div class="db_table show_more_box">
        <el-table :data="content.data" style="width: 100%">
          <el-table-column prop="TABLE_NAME" label="表名" width="180">
            <template slot-scope="scope">
              <span v-html="showDate(scope.row.TABLE_NAME)">
                <!-- {{ scope.row.TABLE_NAME }} -->
              </span>
            </template>
          </el-table-column>
          <el-table-column label="注释">
            <template slot-scope="scope">
              <span v-html="showDate(scope.row.TABLE_COMMENT)">
                <!-- {{ scope.row.TABLE_NAME }} -->
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- {{ scope.row.TABLE_NAME }} -->

              <el-button @click="openTable(scope.row)" size="mini"
                >打开表</el-button
              >
              <el-button size="mini" @click="editStructure(scope.row)"
                >编辑表</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 
      <table>
        <tr class="tr">
          <th class="th">
            <span> 表名 </span>
          </th>
          <th class="th">
            <span> 注释 </span>
          </th>
        </tr>

        <tr class="tr" v-for="(trItem, trI) in content.data" :key="trI">
          <td>
            <span>
              {{ trItem.TABLE_NAME }}
            </span>
          </td>
          <td>
            <span>
              {{ trItem.TABLE_COMMENT }}
            </span>
          </td>
        </tr>
      </table> -->
    </div>

    <!-- 显示表的数据 -->

    <div
      class="dbTable"
      v-if="content.tabType == 'table' || content.tabType == 'sql'"
    >
      <div>
        <div class="icon">
          <div v-if="content.tabType == 'table'">
            <!-- <el-button size="mini" type="primary" icon="el-icon-finished">文本</el-button> -->
            <el-button
              size="mini"
              type="primary"
              @click="showSift"
              icon="el-icon-finished"
              >筛选</el-button
            >
            <el-button
              size="mini"
              @click="showOrderBy"
              type="primary"
              icon="el-icon-receiving"
              >排序</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="refreshTable"
              icon="el-icon-refresh-left"
              >刷新</el-button
            >

            <el-button
              size="mini"
              type="primary"
              @click="addTableData"
              icon="el-icon-circle-plus-outline"
              >新增</el-button
            >

            <div style="float: right">
              <el-input
                size="mini"
                clearable
                v-model="search_text"
                @keyup.enter.native="searchText"
                @input="checkSearchText"
                placeholder="请输入内容"
                suffix-icon="el-icon-search"
              >
                <!-- <el-button
                  size="mini"
                  slot="append"
                  icon="el-icon-search"
                  @click="searchText"
                ></el-button> -->
              </el-input>
            </div>
          </div>
          <div v-if="content.tabType == 'sql'">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-finished"
              @click="runSql"
              >执行</el-button
            >
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-finished"
              @click="format"
              >格式化SQL</el-button
            >
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-finished"
              @click="compression"
              >压缩SQL</el-button
            >
          </div>
        </div>
        <div v-if="content.tabType == 'table'">
          <!-- 筛选 -->
          <div></div>
          <!-- 排序 -->
          <div v-if="showOrderByFlog"></div>
        </div>
      </div>
      <textarea
        v-if="content.tabType == 'sql'"
        ref="mycode"
        :rows="10"
        class="codesql"
        placeholder="请输入SQL,按Tab键进行代码提示"
        v-model="sql_text"
      ></textarea>

      <div>
        <div v-if="showSiftFlog == true">
          <div class="order_by">
            <div v-for="(sft, sfi) in siftList" :key="sfi">
              <el-select
                v-model="sft.cName"
                size="mini"
                class="input-with-select"
                placeholder="请选择字段名"
              >
                <el-option
                  v-for="structureitem in tableDetail.structure"
                  :key="structureitem"
                  :label="structureitem"
                  :value="structureitem"
                >
                </el-option>
              </el-select>

              <el-select
                v-model="sft.Mounted"
                size="mini"
                class="input-with-select"
                placeholder="请选择模式"
                @change="checkSiftMounteds(sft)"
              >
                <el-option
                  v-for="(mounted, i) in siftMounteds"
                  :key="mounted.label"
                  :label="mounted.label"
                  :value="i"
                >
                </el-option>
              </el-select>

              <el-input
                v-if="!sft.hideLabel"
                size="mini"
                v-model="sft.Label"
                placeholder='请输入值（多个以","隔开）'
              >
              </el-input>
            </div>
          </div>

          <el-button @click="getData" size="mini">确认</el-button>
          <el-button @click="addSiftList" size="mini">添加</el-button>
          <el-button @click="clearSiftList" size="mini">清除</el-button>
        </div>
        <div v-if="showOrderByFlog == true">
          <div class="order_by">
            <div v-for="(odBy, odi) in orderByList" :key="odi">
              <el-select
                v-model="odBy.cName"
                size="mini"
                class="input-with-select"
                placeholder="请选择字段名"
              >
                <el-option
                  v-for="structureitem in tableDetail.structure"
                  :key="structureitem"
                  :label="structureitem"
                  :value="structureitem"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="odBy.flog"
                size="mini"
                class="input-with-select"
                placeholder="请选择排序方式"
              >
                <el-option
                  v-for="otype in orderType"
                  :key="otype"
                  :label="otype"
                  :value="otype"
                >
                </el-option>
              </el-select>
            </div>
          </div>

          <el-button @click="getData" size="mini">确认</el-button>
          <el-button @click="addOrderByList" size="mini">添加</el-button>
          <el-button @click="clearOrderByList" size="mini">清除</el-button>
        </div>
      </div>
      <div
        class="db_table"
        :class="{
          show_more_box: content.tabType == 'sql' || showMoreBox,
          showCodeMirror: content.tabType == 'sql',
        }"
      >
        <table @mouseup="cancelActive">
          <tr class="tr">
            <th
              class="th"
              v-for="(tdStrItem, tdStri) in tableDetail.structure"
              :key="tdStri"
            >
              <span>
                {{ tdStrItem }}
              </span>
            </th>
          </tr>

          <tr class="tr" v-for="(trItem, trI) in tableDetail.data" :key="trI">
            <td
              :class="{
                active: bd_item.__isActive == true,
                editActive: bd_item.__isEditActive == true,
                leftTag: bd_item.__isTag == true,
              }"
              v-for="(bd_item, tdI) in trItem"
              :key="tdI"
            >
              <span
                v-if="!bd_item.__edit && !bd_item.__showDelete"
                v-html="showDate(bd_item.value)"
                @mousedown="tableMoveStart(trI, tdI)"
                @mouseover="tableMoveOver(trI, tdI)"
                @mouseup="tableMoveUp(trI, tdI)"
                @dblclick="dblclickTd(trI, tdI)"
              >
              </span>
              <span
                v-if="bd_item.__edit && !bd_item.__showDelete"
                @mousedown="tableMoveStart(trI, tdI)"
                @mouseover="tableMoveOver(trI, tdI)"
                @mouseup="tableMoveUp(trI, tdI)"
                @dblclick="dblclickTd(trI, tdI)"
              >
                <input
                  type="text"
                  :ref="'tb_data_td_' + trI + '_' + tdI"
                  v-model="bd_item.value"
                  v-focus="bd_item.__edit"
                  @blur="blurTd(trI, tdI)"
                />
              </span>

              <span v-if="bd_item.__showDelete">
                <button @click="deleteCol(trItem, trI)">删除</button>
              </span>
            </td>
          </tr>
        </table>
      </div>

      <div class="footer_status_bar">
        <span>
          <el-button
            v-if="content.tabType == 'table'"
            type="success"
            icon="el-icon-check"
            size="mini"
            :disabled="disable_save_btn"
            @click="save_data"
            >保存</el-button
          >
        </span>
        {{ isconnect }}

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, slot, prev, pager, next, jumper"
          :total="total"
        >
          <el-select
            v-model="pageSize"
            placeholder="可手动输入"
            filterable
            size="mini"
            @blur="selectBlur"
            @change="handleCurrentChange(1)"
          >
            <el-option
              v-for="(item, index) in [100, 200, 300, 500, 1000, 10000]"
              :label="item"
              :value="item"
              :key="index"
            ></el-option>
          </el-select>
        </el-pagination>
      </div>
    </div>
    <div v-if="content.tabType == 'table' && false">
      <div>
        <div class="icon">
          <el-button type="primary" icon="el-icon-finished">文本</el-button>
          <el-button type="primary" icon="el-icon-finished">筛选</el-button>
          <el-button type="primary" icon="el-icon-receiving">排序</el-button>
        </div>
        <div>
          <!-- 筛选 -->
          <div></div>
          <!-- 排序 -->
          <div>排序</div>
        </div>
      </div>

      <el-table
        :data="tableDetail.data"
        :show-overflow-tooltip="true"
        max-height="700"
      >
        <!--  -->

        <el-table-column
          v-for="(table_coment, i) in tableDetail.structure"
          :key="i"
          :prop="table_coment"
          :label="table_coment"
        >
          <template slot-scope="scope">
            <span>
              {{ scope.row[table_coment] }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 文本内容显示框 -->
      <div>这里显示文本内容</div>
    </div>
    <!-- 执行sql -->

    <div v-if="content.tabType == 'sql' && false">
      <div>
        <div class="icon">
          <el-button type="primary" icon="el-icon-finished" @click="runSql"
            >执行</el-button
          >
        </div>
      </div>
      <el-input
        type="textarea"
        :rows="10"
        placeholder="请输入SQL"
        v-model="sql_text"
      >
      </el-input>

      <table @mouseup="cancelActive">
        <tr class="tr">
          <th
            class="th"
            v-for="(tdStrItem, tdStri) in tableDetail.structure"
            :key="tdStri"
          >
            <span>
              {{ tdStrItem }}
            </span>
          </th>
        </tr>

        <tr class="tr" v-for="(trItem, trI) in tableDetail.data" :key="trI">
          <td
            :class="{
              leftTag: bd_item.__isTag == true,
              active: bd_item.__isActive == true,
            }"
            v-for="(bd_item, tdI) in trItem"
            :key="tdI"
            @mousedown="tableMoveStart(trI, tdI)"
            @mouseover="tableMoveOver(trI, tdI)"
            @mouseup="tableMoveUp(trI, tdI)"
          >
            <span>
              {{ bd_item.value }}
            </span>
          </td>
        </tr>
      </table>
    </div>
    <!-- 表结构 -->

    <div v-if="content.tabType == 'structure'">
      <el-tabs v-model="structureActiveName" type="card">
        <el-tab-pane label="结构" name="structure">
          <div class="icon">
            <el-row :gutter="20">
              <el-col :span="5"
                ><el-input
                  size="mini"
                  @blur="structureBlur"
                  v-model="tableSetting.TABLE_NAME"
                  ><template slot="prepend">表名</template></el-input
                ></el-col
              >

              <el-col :span="5">
                <template>
                  <el-select
                    size="mini"
                    @change="structureBlur"
                    v-model="tableSetting.TABLE_COLLATION"
                    placeholder="字符集"
                  >
                    <el-option-group
                      v-for="(typesGroup, g_i) in characters"
                      :key="g_i"
                      :label="typesGroup.label"
                    >
                      <el-option
                        v-for="(types, o_i) in typesGroup.options"
                        :key="o_i"
                        :label="types.label"
                        :value="types.label"
                      >
                      </el-option>
                    </el-option-group>
                  </el-select>

                  <!--                   
                   <el-input size="mini" @blur="structureBlur"
                v-model="tableSetting.TABLE_COLLATION"
                  ><template slot="prepend">字符集</template></el-input
                >-->
                </template>
              </el-col>
              <el-col :span="7"
                ><el-input
                  size="mini"
                  @blur="structureBlur"
                  v-model="tableSetting.TABLE_COMMENT"
                  ><template slot="prepend">注释</template></el-input
                ></el-col
              >

              <el-col :span="5">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  @click="addField"
                  >添加</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-refresh"
                  @click="refreshTable"
                  >刷新</el-button
                >
              </el-col>
            </el-row>
          </div>

          <div
            class="db_table"
            :class="content.tabType == 'sql' ? 'show_more_box' : ''"
          >
            <el-table
              height="600px"
              :data="tableData"
              border
              stripe
              style="width: 100%"
              ref="dragTable"
              highlight-current-row
              row-key="id"
            >
              <el-table-column
                :show-overflow-tooltip="true"
                align="center"
                prop="COLUMN_NAME"
                label="字段"
                style="min-width: 250px"
              >
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    @blur="structureBlur"
                    v-model="scope.row.COLUMN_NAME"
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column
                :show-overflow-tooltip="true"
                align="center"
                prop="DATA_TYPE"
                label="数据类型"
                width="150"
              >
                <template slot-scope="scope">
                  <el-select
                    size="mini"
                    @change="structureBlur"
                    v-model="scope.row.DATA_TYPE"
                    placeholder="请选择类型"
                  >
                    <el-option-group
                      v-for="(typesGroup, g_i) in structureTypes"
                      :key="g_i"
                      :label="typesGroup.label"
                    >
                      <el-option
                        v-for="(types, o_i) in typesGroup.options"
                        :key="o_i"
                        :label="types.label"
                        :value="types.label"
                      >
                      </el-option>
                    </el-option-group>
                  </el-select>

                  <!--                   
                  <el-input
                    size="mini"
                    v-model="scope.row.DATA_TYPE"
                  ></el-input> -->
                </template>
              </el-table-column>

              <el-table-column
                :show-overflow-tooltip="true"
                align="center"
                prop="enddate"
                label="长度"
                width="100"
              >
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    @blur="structureBlur"
                    v-model="scope.row.length"
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column
                :show-overflow-tooltip="true"
                align="center"
                prop="enddate"
                label="小数长度"
                width="100"
              >
                <template slot-scope="scope">
                  <el-input
                    @blur="structureBlur"
                    size="mini"
                    v-model="scope.row.point"
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column
                :show-overflow-tooltip="true"
                align="center"
                prop="enddate"
                label="默认值"
                width="150"
              >
                <template slot-scope="scope">
                  <div>
                    <el-checkbox
                      @blur="structureBlur"
                      v-model="scope.row.COLUMN_DEFAULT_NULL"
                      >(Null)</el-checkbox
                    >
                  </div>
                  <div>
                    <el-input
                      :disabled="scope.row.COLUMN_DEFAULT_NULL == true"
                      size="mini"
                      @blur="structureBlur"
                      aria-placeholder="(Null)"
                      v-model="scope.row.COLUMN_DEFAULT"
                    ></el-input>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :show-overflow-tooltip="true"
                align="center"
                prop="enddate"
                label="不允许Null"
                width="80"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    @change="structureBlur"
                    v-model="scope.row.IS_NULLABLE"
                  ></el-checkbox>
                </template>
              </el-table-column>

              <el-table-column
                :show-overflow-tooltip="true"
                align="center"
                prop="EXTRA"
                label="自增"
                width="50"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    @change="structureBlur"
                    v-model="scope.row.EXTRA"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                align="center"
                prop="COLUMN_KEY"
                label="主键"
                width="50"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    @chnage="structureBlur"
                    v-model="scope.row.COLUMN_KEY"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <!-- <el-table-column
                :show-overflow-tooltip="true"
                align="center"
                prop="enddate"
                label="索引 "
              >
                <template slot-scope="scope">
                  <div
                    @dblclick="changeEnddate(scope.$index, 'tag2', scope.row)"
                    style="height: 40px; line-height: 40px"
                  >
                    <span v-show="!scope.row.is_show_tag2">{{
                      scope.row.tag2
                    }}</span>
                    <el-input
                      :ref="'enddateinput' + 'tag2' + '&' + scope.$index"
                      @blur="switchShow(scope.$index, 'tag2')"
                      clearable
                      @keyup.enter.native="$event.target.blur"
                      v-show="scope.row.is_show_tag2"
                      size="mini"
                      v-model="scope.row.tag2"
                    ></el-input>
                  </div>
                </template>
              </el-table-column> -->
              <el-table-column
                :show-overflow-tooltip="true"
                align="center"
                prop="COLUMN_COMMENT"
                label="注释"
              >
                <template slot-scope="scope">
                  <el-input
                    type="textarea"
                    size="mini"
                    @blur="structureBlur"
                    v-model="scope.row.COLUMN_COMMENT"
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-popover
                    placement="top"
                    width="160"
                    v-model="scope.row.deleteVisible"
                  >
                    <p>这是一段内容这是一段内容确定删除吗？</p>
                    <div style="text-align: right; margin: 0">
                      <el-button
                        size="mini"
                        type="text"
                        @click="scope.row.deleteVisible = false"
                        >取消</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="deleteColumn(scope.row)"
                        >确定</el-button
                      >
                    </div>
                    <el-button slot="reference" size="mini">删除</el-button>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="索引" name="second"> 敬请期待！ </el-tab-pane>
      </el-tabs>
      <div>
        <el-button
          type="success"
          icon="el-icon-check"
          size="mini"
          :disabled="disable_table_save_btn"
          @click="save_table_data"
          >保存表</el-button
        >
        {{ isconnect }}
      </div>
    </div>

    <div class="disconnect" v-if="!isconnect && content.tabType != 'object'">
      <!-- <div class="disconnect" v-if="!content.data.isconnect"> -->
      <!-- <div class="disconnect"> -->
      <div>与服务器连接已断开</div>
      <div>
        <el-button @click="reConn">重新连接</el-button>
      </div>
    </div>
  </div>
</template>
<style lang="stylus">
.page_container {
  height: 100%;

  .disconnect {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    text-align: center;
    padding-top: 100px;
  }

  .CodeMirror {
    height: 150px;
  }

  &>.el-header {
    line-height: 60px;
    background: #3c3c3c;
  }

  .page-el-aside {
    background: #ddd;
  }

  & .el-table th.el-table__cell {
    padding: 0 10px;
    max-width: none;

    &>.cell {
      white-space: nowrap;
      overflow: auto;
      width: auto;
      padding: 0;
    }
  }
}

.el-tree *, .el-tabs .el-tabs__header {
  -webkit-touch-callout: none; /* 系统默认菜单被禁用 */
  -webkit-user-select: none; /* webkit浏览器 */
  -khtml-user-select: none; /* 早期浏览器 */
  -moz-user-select: none; /* 火狐 */
  -ms-user-select: none; /* IE10 */
  user-select: none;
}

.th, tr td {
  padding-right: 20px;

  span {
    display: block;
    min-height: 14px;
  }

  .search_text_active {
    background: #fec92e;

    &.active {
      background: red;
    }
  }
}

input {
  -webkit-user-select: auto; /* webkit浏览器 */
}

textarea {
  -webkit-user-select: auto; /* webkit浏览器 */
}

.el-tabs {
  height: 100%;

  .el-tabs__content {
    height: 100%;

    .el-tab-pane {
      height: 100%;
    }
  }
}

.tab_panel {
  height: 100%;

  .dbTable {
    height: 100%;
    width: 100%;

    .db_table {
      overflow: auto;
      height: calc(100% - 96px);
    }

    .show_more_box {
      height: calc(100% - 150px);
    }

    .show_more_box.showCodeMirror {
      height: calc(100% - 250px);
    }

    .el-table__body-wrapper {
      overflow: auto;
      height: 100%;
    }

    td.editActive {
      background: red;
    }

    td.leftTag {
      background: #ddd;
      box-shadow: 1, 1, 1;
    }

    td.active {
      background: blue;
    }
  }

  .footer_status_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .order_by {
    display: flex;

    &>div {
      display: flex;
    }
  }
}
</style>
<script>
// var mysql = require("mysql"); //引入mysql模块

// var connection = mysql.createConnection({      //创建mysql实例
//     port:'3306',
//     host     : 'localhost',
//     user     : 'r666t',
//     password : 'shi666',
//     database : 'test666'
// });
import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";

const CodeMirror = require("codemirror/lib/codemirror");
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/mode/sql/sql");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/sql-hint");
import { format } from "sql-formatter";
console.log(format);

import Sortable from "sortablejs";

export default {
  name: "App",
  props: {
    connId: {
      type: Number,
      default: 0,
    },
    isconnect: {
      type: Boolean,
      default: false,
    },
    content: {
      type: Object,
      // isconnect: {
      //   type: Boolean,
      //   default: false,
      // },
      default: {
        tabType: {
          type: Boolean,
          default: false,
        },
      },
    },
  },

  watch: {
    isconnect(oldValue, newValue) {
      console.log(oldValue, newValue);
      // oldValue  a旧值
      // newValue a新值
    },
  },

  data() {
    return {
      sql_text: "SELECT * FROM tabname WHERE 1 and tabname.id =1 ",
      tableMousedown: false,
      coordinatesTable: {
        x: -1,
        y: -1,
      },
      throughCoordinate: {
        x: -1,
        y: -1,
      },
      minX: -1,
      maxX: -1,
      minY: -1,
      maxY: -1,
      tableActives: [],
      tableEdits: [],
      tableEditDatas: {},
      tableDetail: {
        structure: {},
        data: [],
      },
      disable_save_btn: true,
      tables: {},

      pageSize: 100,
      currentPage: 1,
      total: 0,
      showMoreBox: false,
      showOrderByFlog: false,
      showSiftFlog: false,
      orderType: ["asc", "desc"],
      orderByList: [
        {
          cName: "",
          flog: "asc",
        },
      ],
      siftMounteds: [
        {
          label: "like",
          temp: "like '${1}'",
        },
        {
          label: "like  %...%",
          temp: "like '%${1}%'",
        },
        {
          label: "not like",
          temp: "not like '${1}'",
        },
        {
          label: ">",
          temp: " > '${1}'",
        },
        {
          label: "<",
          temp: " < '${1}'",
        },
        {
          label: ">=",
          temp: ">= '${1}'",
        },
        {
          label: "<=",
          temp: "<= '${1}'",
        },
        {
          label: "=",
          temp: "= '${1}'",
        },
        {
          label: "!=",
          temp: "!= '${1}'",
        },

        {
          val_num: -1,
          label: "IN (...)",
          temp: "IN (${1})",
        },
        {
          val_num: -1,
          label: "NOT IN (...)",
          temp: "NOT IN (${1})",
        },
        {
          val_num: 2,
          label: "BETWEEN",
          temp: "BETWEEN '${1}' and '${2}'",
        },
        {
          val_num: 2,
          label: "NOT BETWEEN",
          temp: "NOT BETWEEN '${1}' and '${2}'",
        },
        {
          not_val: true,
          label: "= ''",
          temp: "= ''",
        },
        {
          not_val: true,
          label: "!= ''",
          temp: "!= ''",
        },
        {
          not_val: true,
          label: "IS NULL",
          temp: "IS NULL",
        },
        {
          not_val: true,
          label: "IS NOT NULL",
          temp: "IS NOT NULL",
        },
      ],
      siftList: [
        {
          cName: "",
          Mounted: "",
          Label: "",
          hideLabel: false,
        },
      ],
      // isconnect: false,
      structureActiveName: "structure",
      tableData: [],

      structureTypes: [
        {
          label: "",
          options: [
            {
              title:
                "4 字节整数，有符号范围从 -2147483648 到 2147483647，无符号范围从 0 到 4294967295",
              label: "INT",
            },
            {
              "-selected": "selected",
              title: "变长（0-65,535）字符串，最大有效长度取决于最大行大小",
              label: "VARCHAR",
            },
            {
              title:
                "最多存储 65535（2^16 - 1）字节的文本字段，存储时在内容前使用 2 字节表示内容的字节数",
              label: "TEXT",
            },
            {
              title: "日期，支持的范围从 1000-01-01 到 9999-12-31",
              label: "DATE",
            },
          ],
        },

        {
          label: "数字",
          options: [
            {
              title:
                "1 字节整数，有符号范围从 -128 到 127，无符号范围从 0 到 255",
              label: "TINYINT",
            },
            {
              title:
                "2 字节整数，有符号范围从 -32768 到 32767，无符号范围从 0 到 65535",
              label: "SMALLINT",
            },
            {
              title:
                "3 字节整数，有符号范围从 -8388608 到 8388607，无符号范围从 0 到 16777215",
              label: "MEDIUMINT",
            },
            {
              title:
                "4 字节整数，有符号范围从 -2147483648 到 2147483647，无符号范围从 0 到 4294967295",
              label: "INT",
            },
            {
              title:
                "8 字节整数，有符号范围从 -9223372036854775808 到 9223372036854775807，无符号范围从 0 到 18446744073709551615",
              label: "BIGINT",
            },
            {
              "-disabled": "disabled",
              label: "-",
            },
            {
              title:
                "定点数（M，D）- 整数部分（M）最大为 65（默认 10），小数部分（D）最大为 30（默认 0）",
              label: "DECIMAL",
            },
            {
              title:
                "单精度浮点数，取值范围从 -3.402823466E+38 到 -1.175494351E-38、0 以及从 1.175494351E-38 到 3.402823466E+38",
              label: "FLOAT",
            },
            {
              title:
                "双精度浮点数，取值范围从 -1.7976931348623157E+308 到 -2.2250738585072014E-308、0 以及从 2.2250738585072014E-308 到 1.7976931348623157E+308",
              label: "DOUBLE",
            },
            {
              title:
                "DOUBLE 的别名（例外：REAL_AS_FLOAT SQL 模式时它是 FLOAT 的别名）",
              label: "REAL",
            },
            {
              "-disabled": "disabled",
              label: "-",
            },
            {
              title: "位类型（M），每个值存储 M 位（默认为 1，最大为 64）",
              label: "BIT",
            },
            {
              title: "TINYINT(1) 的别名，零值表示假，非零值表示真",
              label: "BOOLEAN",
            },
            {
              title: "BIGINT UNSIGNED NOT NULL AUTO_INCREMENT UNIQUE 的别名",
              label: "SERIAL",
            },
          ],
        },
        {
          label: "日期与时间",
          options: [
            {
              title: "日期，支持的范围从 1000-01-01 到 9999-12-31",
              label: "DATE",
            },
            {
              title:
                "日期与时间，支持的范围从 1000-01-01 00:00:00 到 9999-12-31 23:59:59",
              label: "DATETIME",
            },
            {
              title:
                "时间戳，范围从 1970-01-01 00:00:01 UTC 到 2038-01-09 03:14:07 UTC，存储为自纪元（1970-01-01 00:00:00 UTC）起的秒数",
              label: "TIMESTAMP",
            },
            {
              title: "时间，范围从 -838:59:59 到 838:59:59",
              label: "TIME",
            },
            {
              title:
                "四位数（4，默认）或两位数（2）的年份，取值范围从 70（1970）到 69（2069）或从 1901 到 2155 以及 0000",
              label: "YEAR",
            },
          ],
        },
        {
          label: "文本",
          options: [
            {
              title:
                "定长（0-255，默认 1）字符串，存储时会向右边补足空格到指定长度",
              label: "CHAR",
            },
            {
              "-selected": "selected",
              title: "变长（0-65,535）字符串，最大有效长度取决于最大行大小",
              label: "VARCHAR",
            },
            {
              "-disabled": "disabled",
              label: "-",
            },
            {
              title:
                "最多存储 255（2^8 - 1）字节的文本字段，存储时在内容前使用 1 字节表示内容的字节数",
              label: "TINYTEXT",
            },
            {
              title:
                "最多存储 65535（2^16 - 1）字节的文本字段，存储时在内容前使用 2 字节表示内容的字节数",
              label: "TEXT",
            },
            {
              title:
                "最多存储 16777215（2^24 - 1）字节的文本字段，存储时在内容前使用 3 字节表示内容的字节数",
              label: "MEDIUMTEXT",
            },
            {
              title:
                "最多存储 4294967295 字节即 4GB（2^32 - 1）的文本字段，存储时在内容前使用 4 字节表示内容的字节数",
              label: "LONGTEXT",
            },
            {
              "-disabled": "disabled",
              label: "-",
            },
            {
              title:
                "类似于 CHAR 类型，但其存储的是二进制字节串而不是非二进制字符串",
              label: "BINARY",
            },
            {
              title:
                "类似于 VARCHAR 类型，但其存储的是二进制字节串而不是非二进制字符串",
              label: "VARBINARY",
            },
            {
              "-disabled": "disabled",
              label: "-",
            },
            {
              title:
                "最多存储 255（2^8 - 1）字节的 BLOB 字段，存储时在内容前使用 1 字节表示内容的字节数",
              label: "TINYBLOB",
            },
            {
              title:
                "最多存储 65535（2^16 - 1）字节的 BLOB 字段，存储时在内容前使用 2 字节表示内容的字节数",
              label: "BLOB",
            },
            {
              title:
                "最多存储 16777215（2^24 - 1）字节的 BLOB 字段，存储时在内容前使用 3 字节表示内容的字节数",
              label: "MEDIUMBLOB",
            },
            {
              title:
                "最多存储 4294967295 字节即 4GB（2^32 - 1）的 BLOB 字段，存储时在内容前使用 4 字节表示内容的字节数",
              label: "LONGBLOB",
            },
            {
              "-disabled": "disabled",
              label: "-",
            },
            {
              title: "枚举，可从最多 65535 个值的列表中选择或特殊的错误值 ''",
              label: "ENUM",
            },
            {
              title: "可从最多 64 个成员中选择集合为一个值",
              label: "SET",
            },
          ],
        },
        {
          label: "空间",
          options: [
            {
              title: "一种能存储任意类型几何体的类型",
              label: "GEOMETRY",
            },
            {
              title: "二维空间中的点",
              label: "POINT",
            },
            {
              title: "点之间的线性插值曲线",
              label: "LINESTRING",
            },
            {
              title: "多边形",
              label: "POLYGON",
            },
            {
              title: "点的集合",
              label: "MULTIPOINT",
            },
            {
              title: "点之间的线性插值曲线的集合",
              label: "MULTILINESTRING",
            },
            {
              title: "多边形的集合",
              label: "MULTIPOLYGON",
            },
            {
              title: "任意类型几何体对象的集合",
              label: "GEOMETRYCOLLECTION",
            },
          ],
        },
        {
          label: "JSON",
          options: [
            {
              title: "存储并可高效访问 JSON （JavaScript 对象） 文档中的数据",
              label: "JSON",
            },
          ],
        },
      ],

      characters: [
        {
          label: "armscii8",
          title: "ARMSCII-8 Armenian",
          options: [
            {
              label: "armscii8_bin",
              title: "亚美尼亚语, 二进制",
              text: "armscii8_bin",
            },
            {
              label: "armscii8_general_ci",
              title: "亚美尼亚语, 不区分大小写",
              text: "armscii8_general_ci",
            },
          ],
        },
        {
          label: "ascii",
          title: "US ASCII",
          options: [
            {
              label: "ascii_bin",
              title: "西欧, 二进制",
              text: "ascii_bin",
            },
            {
              label: "ascii_general_ci",
              title: "西欧, 不区分大小写",
              text: "ascii_general_ci",
            },
          ],
        },
        {
          label: "big5",
          title: "Big5 Traditional Chinese",
          options: [
            {
              label: "big5_bin",
              title: "繁体中文, 二进制",
              text: "big5_bin",
            },
            {
              label: "big5_chinese_ci",
              title: "繁体中文, 不区分大小写",
              text: "big5_chinese_ci",
            },
          ],
        },
        {
          label: "binary",
          title: "Binary pseudo charset",
          options: [
            {
              label: "binary",
              title: "二进制",
              text: "binary",
            },
          ],
        },
        {
          label: "cp1250",
          title: "Windows Central European",
          options: [
            {
              label: "cp1250_bin",
              title: "中欧, 二进制",
              text: "cp1250_bin",
            },
            {
              label: "cp1250_croatian_ci",
              title: "克罗地亚语, 不区分大小写",
              text: "cp1250_croatian_ci",
            },
            {
              label: "cp1250_czech_cs",
              title: "捷克语, 区分大小写",
              text: "cp1250_czech_cs",
            },
            {
              label: "cp1250_general_ci",
              title: "中欧, 不区分大小写",
              text: "cp1250_general_ci",
            },
            {
              label: "cp1250_polish_ci",
              title: "波兰语, 不区分大小写",
              text: "cp1250_polish_ci",
            },
          ],
        },
        {
          label: "cp1251",
          title: "Windows Cyrillic",
          options: [
            {
              label: "cp1251_bin",
              title: "西里尔语, 二进制",
              text: "cp1251_bin",
            },
            {
              label: "cp1251_bulgarian_ci",
              title: "保加利亚语, 不区分大小写",
              text: "cp1251_bulgarian_ci",
            },
            {
              label: "cp1251_general_ci",
              title: "西里尔语, 不区分大小写",
              text: "cp1251_general_ci",
            },
            {
              label: "cp1251_general_cs",
              title: "西里尔语, 区分大小写",
              text: "cp1251_general_cs",
            },
            {
              label: "cp1251_ukrainian_ci",
              title: "乌克兰语, 不区分大小写",
              text: "cp1251_ukrainian_ci",
            },
          ],
        },
        {
          label: "cp1256",
          title: "Windows Arabic",
          options: [
            {
              label: "cp1256_bin",
              title: "阿拉伯语, 二进制",
              text: "cp1256_bin",
            },
            {
              label: "cp1256_general_ci",
              title: "阿拉伯语, 不区分大小写",
              text: "cp1256_general_ci",
            },
          ],
        },
        {
          label: "cp1257",
          title: "Windows Baltic",
          options: [
            {
              label: "cp1257_bin",
              title: "巴拉克语, 二进制",
              text: "cp1257_bin",
            },
            {
              label: "cp1257_general_ci",
              title: "巴拉克语, 不区分大小写",
              text: "cp1257_general_ci",
            },
            {
              label: "cp1257_lithuanian_ci",
              title: "立陶宛语, 不区分大小写",
              text: "cp1257_lithuanian_ci",
            },
          ],
        },
        {
          label: "cp850",
          title: "DOS West European",
          options: [
            {
              label: "cp850_bin",
              title: "西欧, 二进制",
              text: "cp850_bin",
            },
            {
              label: "cp850_general_ci",
              title: "西欧, 不区分大小写",
              text: "cp850_general_ci",
            },
          ],
        },
        {
          label: "cp852",
          title: "DOS Central European",
          options: [
            {
              label: "cp852_bin",
              title: "中欧, 二进制",
              text: "cp852_bin",
            },
            {
              label: "cp852_general_ci",
              title: "中欧, 不区分大小写",
              text: "cp852_general_ci",
            },
          ],
        },
        {
          label: "cp866",
          title: "DOS Russian",
          options: [
            {
              label: "cp866_bin",
              title: "俄语, 二进制",
              text: "cp866_bin",
            },
            {
              label: "cp866_general_ci",
              title: "俄语, 不区分大小写",
              text: "cp866_general_ci",
            },
          ],
        },
        {
          label: "cp932",
          title: "SJIS for Windows Japanese",
          options: [
            {
              label: "cp932_bin",
              title: "日语, 二进制",
              text: "cp932_bin",
            },
            {
              label: "cp932_japanese_ci",
              title: "日语, 不区分大小写",
              text: "cp932_japanese_ci",
            },
          ],
        },
        {
          label: "dec8",
          title: "DEC West European",
          options: [
            {
              label: "dec8_bin",
              title: "西欧, 二进制",
              text: "dec8_bin",
            },
            {
              label: "dec8_swedish_ci",
              title: "瑞典语, 不区分大小写",
              text: "dec8_swedish_ci",
            },
          ],
        },
        {
          label: "eucjpms",
          title: "UJIS for Windows Japanese",
          options: [
            {
              label: "eucjpms_bin",
              title: "日语, 二进制",
              text: "eucjpms_bin",
            },
            {
              label: "eucjpms_japanese_ci",
              title: "日语, 不区分大小写",
              text: "eucjpms_japanese_ci",
            },
          ],
        },
        {
          label: "euckr",
          title: "EUC-KR Korean",
          options: [
            {
              label: "euckr_bin",
              title: "朝鲜语, 二进制",
              text: "euckr_bin",
            },
            {
              label: "euckr_korean_ci",
              title: "朝鲜语, 不区分大小写",
              text: "euckr_korean_ci",
            },
          ],
        },
        {
          label: "gb18030",
          title: "China National Standard GB18030",
          options: [
            {
              label: "gb18030_bin",
              title: "中文, 二进制",
              text: "gb18030_bin",
            },
            {
              label: "gb18030_chinese_ci",
              title: "中文, 不区分大小写",
              text: "gb18030_chinese_ci",
            },
            {
              label: "gb18030_unicode_520_ci",
              title: "中文 (UCA 5.2.0), 不区分大小写",
              text: "gb18030_unicode_520_ci",
            },
          ],
        },
        {
          label: "gb2312",
          title: "GB2312 Simplified Chinese",
          options: [
            {
              label: "gb2312_bin",
              title: "简体中文, 二进制",
              text: "gb2312_bin",
            },
            {
              label: "gb2312_chinese_ci",
              title: "简体中文, 不区分大小写",
              text: "gb2312_chinese_ci",
            },
          ],
        },
        {
          label: "gbk",
          title: "GBK Simplified Chinese",
          options: [
            {
              label: "gbk_bin",
              title: "简体中文, 二进制",
              text: "gbk_bin",
            },
            {
              label: "gbk_chinese_ci",
              title: "简体中文, 不区分大小写",
              text: "gbk_chinese_ci",
            },
          ],
        },
        {
          label: "geostd8",
          title: "GEOSTD8 Georgian",
          options: [
            {
              label: "geostd8_bin",
              title: "乔治亚语, 二进制",
              text: "geostd8_bin",
            },
            {
              label: "geostd8_general_ci",
              title: "乔治亚语, 不区分大小写",
              text: "geostd8_general_ci",
            },
          ],
        },
        {
          label: "greek",
          title: "ISO 8859-7 Greek",
          options: [
            {
              label: "greek_bin",
              title: "希腊语, 二进制",
              text: "greek_bin",
            },
            {
              label: "greek_general_ci",
              title: "希腊语, 不区分大小写",
              text: "greek_general_ci",
            },
          ],
        },
        {
          label: "hebrew",
          title: "ISO 8859-8 Hebrew",
          options: [
            {
              label: "hebrew_bin",
              title: "希伯来语, 二进制",
              text: "hebrew_bin",
            },
            {
              label: "hebrew_general_ci",
              title: "希伯来语, 不区分大小写",
              text: "hebrew_general_ci",
            },
          ],
        },
        {
          label: "hp8",
          title: "HP West European",
          options: [
            {
              label: "hp8_bin",
              title: "西欧, 二进制",
              text: "hp8_bin",
            },
            {
              label: "hp8_english_ci",
              title: "英语, 不区分大小写",
              text: "hp8_english_ci",
            },
          ],
        },
        {
          label: "keybcs2",
          title: "DOS Kamenicky Czech-Slovak",
          options: [
            {
              label: "keybcs2_bin",
              title: "捷克斯洛伐克语, 二进制",
              text: "keybcs2_bin",
            },
            {
              label: "keybcs2_general_ci",
              title: "捷克斯洛伐克语, 不区分大小写",
              text: "keybcs2_general_ci",
            },
          ],
        },
        {
          label: "koi8r",
          title: "KOI8-R Relcom Russian",
          options: [
            {
              label: "koi8r_bin",
              title: "俄语, 二进制",
              text: "koi8r_bin",
            },
            {
              label: "koi8r_general_ci",
              title: "俄语, 不区分大小写",
              text: "koi8r_general_ci",
            },
          ],
        },
        {
          label: "koi8u",
          title: "KOI8-U Ukrainian",
          options: [
            {
              label: "koi8u_bin",
              title: "乌克兰语, 二进制",
              text: "koi8u_bin",
            },
            {
              label: "koi8u_general_ci",
              title: "乌克兰语, 不区分大小写",
              text: "koi8u_general_ci",
            },
          ],
        },
        {
          label: "latin1",
          title: "cp1252 West European",
          options: [
            {
              label: "latin1_bin",
              title: "西欧, 二进制",
              text: "latin1_bin",
            },
            {
              label: "latin1_danish_ci",
              title: "丹麦语, 不区分大小写",
              text: "latin1_danish_ci",
            },
            {
              label: "latin1_general_ci",
              title: "西欧, 不区分大小写",
              text: "latin1_general_ci",
            },
            {
              label: "latin1_general_cs",
              title: "西欧, 区分大小写",
              text: "latin1_general_cs",
            },
            {
              label: "latin1_german1_ci",
              title: "德语（字典顺序）, 不区分大小写",
              text: "latin1_german1_ci",
            },
            {
              label: "latin1_german2_ci",
              title: "德语（电话簿排序）, 不区分大小写",
              text: "latin1_german2_ci",
            },
            {
              label: "latin1_spanish_ci",
              title: "西班牙语（现代）, 不区分大小写",
              text: "latin1_spanish_ci",
            },
            {
              label: "latin1_swedish_ci",
              title: "瑞典语, 不区分大小写",
              text: "latin1_swedish_ci",
            },
          ],
        },
        {
          label: "latin2",
          title: "ISO 8859-2 Central European",
          options: [
            {
              label: "latin2_bin",
              title: "中欧, 二进制",
              text: "latin2_bin",
            },
            {
              label: "latin2_croatian_ci",
              title: "克罗地亚语, 不区分大小写",
              text: "latin2_croatian_ci",
            },
            {
              label: "latin2_czech_cs",
              title: "捷克语, 区分大小写",
              text: "latin2_czech_cs",
            },
            {
              label: "latin2_general_ci",
              title: "中欧, 不区分大小写",
              text: "latin2_general_ci",
            },
            {
              label: "latin2_hungarian_ci",
              title: "匈牙利语, 不区分大小写",
              text: "latin2_hungarian_ci",
            },
          ],
        },
        {
          label: "latin5",
          title: "ISO 8859-9 Turkish",
          options: [
            {
              label: "latin5_bin",
              title: "土耳其语, 二进制",
              text: "latin5_bin",
            },
            {
              label: "latin5_turkish_ci",
              title: "土耳其语, 不区分大小写",
              text: "latin5_turkish_ci",
            },
          ],
        },
        {
          label: "latin7",
          title: "ISO 8859-13 Baltic",
          options: [
            {
              label: "latin7_bin",
              title: "巴拉克语, 二进制",
              text: "latin7_bin",
            },
            {
              label: "latin7_estonian_cs",
              title: "爱沙尼亚语, 区分大小写",
              text: "latin7_estonian_cs",
            },
            {
              label: "latin7_general_ci",
              title: "巴拉克语, 不区分大小写",
              text: "latin7_general_ci",
            },
            {
              label: "latin7_general_cs",
              title: "巴拉克语, 区分大小写",
              text: "latin7_general_cs",
            },
          ],
        },
        {
          label: "macce",
          title: "Mac Central European",
          options: [
            {
              label: "macce_bin",
              title: "中欧, 二进制",
              text: "macce_bin",
            },
            {
              label: "macce_general_ci",
              title: "中欧, 不区分大小写",
              text: "macce_general_ci",
            },
          ],
        },
        {
          label: "macroman",
          title: "Mac West European",
          options: [
            {
              label: "macroman_bin",
              title: "西欧, 二进制",
              text: "macroman_bin",
            },
            {
              label: "macroman_general_ci",
              title: "西欧, 不区分大小写",
              text: "macroman_general_ci",
            },
          ],
        },
        {
          label: "sjis",
          title: "Shift-JIS Japanese",
          options: [
            {
              label: "sjis_bin",
              title: "日语, 二进制",
              text: "sjis_bin",
            },
            {
              label: "sjis_japanese_ci",
              title: "日语, 不区分大小写",
              text: "sjis_japanese_ci",
            },
          ],
        },
        {
          label: "swe7",
          title: "7bit Swedish",
          options: [
            {
              label: "swe7_bin",
              title: "瑞典语, 二进制",
              text: "swe7_bin",
            },
            {
              label: "swe7_swedish_ci",
              title: "瑞典语, 不区分大小写",
              text: "swe7_swedish_ci",
            },
          ],
        },
        {
          label: "tis620",
          title: "TIS620 Thai",
          options: [
            {
              label: "tis620_bin",
              title: "泰语, 二进制",
              text: "tis620_bin",
            },
            {
              label: "tis620_thai_ci",
              title: "泰语, 不区分大小写",
              text: "tis620_thai_ci",
            },
          ],
        },
        {
          label: "ucs2",
          title: "UCS-2 Unicode",
          options: [
            {
              label: "ucs2_bin",
              title: "Unicode, 二进制",
              text: "ucs2_bin",
            },
            {
              label: "ucs2_croatian_ci",
              title: "克罗地亚语, 不区分大小写",
              text: "ucs2_croatian_ci",
            },
            {
              label: "ucs2_czech_ci",
              title: "捷克语, 不区分大小写",
              text: "ucs2_czech_ci",
            },
            {
              label: "ucs2_danish_ci",
              title: "丹麦语, 不区分大小写",
              text: "ucs2_danish_ci",
            },
            {
              label: "ucs2_esperanto_ci",
              title: "世界语, 不区分大小写",
              text: "ucs2_esperanto_ci",
            },
            {
              label: "ucs2_estonian_ci",
              title: "爱沙尼亚语, 不区分大小写",
              text: "ucs2_estonian_ci",
            },
            {
              label: "ucs2_general_ci",
              title: "Unicode, 不区分大小写",
              text: "ucs2_general_ci",
            },
            {
              label: "ucs2_general_mysql500_ci",
              title: "Unicode (MySQL 5.0.0), 不区分大小写",
              text: "ucs2_general_mysql500_ci",
            },
            {
              label: "ucs2_german2_ci",
              title: "德语（电话簿排序）, 不区分大小写",
              text: "ucs2_german2_ci",
            },
            {
              label: "ucs2_hungarian_ci",
              title: "匈牙利语, 不区分大小写",
              text: "ucs2_hungarian_ci",
            },
            {
              label: "ucs2_icelandic_ci",
              title: "冰岛语, 不区分大小写",
              text: "ucs2_icelandic_ci",
            },
            {
              label: "ucs2_latvian_ci",
              title: "拉脱维亚语, 不区分大小写",
              text: "ucs2_latvian_ci",
            },
            {
              label: "ucs2_lithuanian_ci",
              title: "立陶宛语, 不区分大小写",
              text: "ucs2_lithuanian_ci",
            },
            {
              label: "ucs2_persian_ci",
              title: "波斯语, 不区分大小写",
              text: "ucs2_persian_ci",
            },
            {
              label: "ucs2_polish_ci",
              title: "波兰语, 不区分大小写",
              text: "ucs2_polish_ci",
            },
            {
              label: "ucs2_roman_ci",
              title: "西欧, 不区分大小写",
              text: "ucs2_roman_ci",
            },
            {
              label: "ucs2_romanian_ci",
              title: "罗马尼亚语, 不区分大小写",
              text: "ucs2_romanian_ci",
            },
            {
              label: "ucs2_sinhala_ci",
              title: "僧伽罗语, 不区分大小写",
              text: "ucs2_sinhala_ci",
            },
            {
              label: "ucs2_slovak_ci",
              title: "斯洛伐克语, 不区分大小写",
              text: "ucs2_slovak_ci",
            },
            {
              label: "ucs2_slovenian_ci",
              title: "斯洛文尼亚语, 不区分大小写",
              text: "ucs2_slovenian_ci",
            },
            {
              label: "ucs2_spanish2_ci",
              title: "西班牙语（传统）, 不区分大小写",
              text: "ucs2_spanish2_ci",
            },
            {
              label: "ucs2_spanish_ci",
              title: "西班牙语（现代）, 不区分大小写",
              text: "ucs2_spanish_ci",
            },
            {
              label: "ucs2_swedish_ci",
              title: "瑞典语, 不区分大小写",
              text: "ucs2_swedish_ci",
            },
            {
              label: "ucs2_turkish_ci",
              title: "土耳其语, 不区分大小写",
              text: "ucs2_turkish_ci",
            },
            {
              label: "ucs2_unicode_520_ci",
              title: "Unicode (UCA 5.2.0), 不区分大小写",
              text: "ucs2_unicode_520_ci",
            },
            {
              label: "ucs2_unicode_ci",
              title: "Unicode, 不区分大小写",
              text: "ucs2_unicode_ci",
            },
            {
              label: "ucs2_vietnamese_ci",
              title: "越南语, 不区分大小写",
              text: "ucs2_vietnamese_ci",
            },
          ],
        },
        {
          label: "ujis",
          title: "EUC-JP Japanese",
          options: [
            {
              label: "ujis_bin",
              title: "日语, 二进制",
              text: "ujis_bin",
            },
            {
              label: "ujis_japanese_ci",
              title: "日语, 不区分大小写",
              text: "ujis_japanese_ci",
            },
          ],
        },
        {
          label: "utf16",
          title: "UTF-16 Unicode",
          options: [
            {
              label: "utf16_bin",
              title: "Unicode, 二进制",
              text: "utf16_bin",
            },
            {
              label: "utf16_croatian_ci",
              title: "克罗地亚语, 不区分大小写",
              text: "utf16_croatian_ci",
            },
            {
              label: "utf16_czech_ci",
              title: "捷克语, 不区分大小写",
              text: "utf16_czech_ci",
            },
            {
              label: "utf16_danish_ci",
              title: "丹麦语, 不区分大小写",
              text: "utf16_danish_ci",
            },
            {
              label: "utf16_esperanto_ci",
              title: "世界语, 不区分大小写",
              text: "utf16_esperanto_ci",
            },
            {
              label: "utf16_estonian_ci",
              title: "爱沙尼亚语, 不区分大小写",
              text: "utf16_estonian_ci",
            },
            {
              label: "utf16_general_ci",
              title: "Unicode, 不区分大小写",
              text: "utf16_general_ci",
            },
            {
              label: "utf16_german2_ci",
              title: "德语（电话簿排序）, 不区分大小写",
              text: "utf16_german2_ci",
            },
            {
              label: "utf16_hungarian_ci",
              title: "匈牙利语, 不区分大小写",
              text: "utf16_hungarian_ci",
            },
            {
              label: "utf16_icelandic_ci",
              title: "冰岛语, 不区分大小写",
              text: "utf16_icelandic_ci",
            },
            {
              label: "utf16_latvian_ci",
              title: "拉脱维亚语, 不区分大小写",
              text: "utf16_latvian_ci",
            },
            {
              label: "utf16_lithuanian_ci",
              title: "立陶宛语, 不区分大小写",
              text: "utf16_lithuanian_ci",
            },
            {
              label: "utf16_persian_ci",
              title: "波斯语, 不区分大小写",
              text: "utf16_persian_ci",
            },
            {
              label: "utf16_polish_ci",
              title: "波兰语, 不区分大小写",
              text: "utf16_polish_ci",
            },
            {
              label: "utf16_roman_ci",
              title: "西欧, 不区分大小写",
              text: "utf16_roman_ci",
            },
            {
              label: "utf16_romanian_ci",
              title: "罗马尼亚语, 不区分大小写",
              text: "utf16_romanian_ci",
            },
            {
              label: "utf16_sinhala_ci",
              title: "僧伽罗语, 不区分大小写",
              text: "utf16_sinhala_ci",
            },
            {
              label: "utf16_slovak_ci",
              title: "斯洛伐克语, 不区分大小写",
              text: "utf16_slovak_ci",
            },
            {
              label: "utf16_slovenian_ci",
              title: "斯洛文尼亚语, 不区分大小写",
              text: "utf16_slovenian_ci",
            },
            {
              label: "utf16_spanish2_ci",
              title: "西班牙语（传统）, 不区分大小写",
              text: "utf16_spanish2_ci",
            },
            {
              label: "utf16_spanish_ci",
              title: "西班牙语（现代）, 不区分大小写",
              text: "utf16_spanish_ci",
            },
            {
              label: "utf16_swedish_ci",
              title: "瑞典语, 不区分大小写",
              text: "utf16_swedish_ci",
            },
            {
              label: "utf16_turkish_ci",
              title: "土耳其语, 不区分大小写",
              text: "utf16_turkish_ci",
            },
            {
              label: "utf16_unicode_520_ci",
              title: "Unicode (UCA 5.2.0), 不区分大小写",
              text: "utf16_unicode_520_ci",
            },
            {
              label: "utf16_unicode_ci",
              title: "Unicode, 不区分大小写",
              text: "utf16_unicode_ci",
            },
            {
              label: "utf16_vietnamese_ci",
              title: "越南语, 不区分大小写",
              text: "utf16_vietnamese_ci",
            },
          ],
        },
        {
          label: "utf16le",
          title: "UTF-16LE Unicode",
          options: [
            {
              label: "utf16le_bin",
              title: "Unicode, 二进制",
              text: "utf16le_bin",
            },
            {
              label: "utf16le_general_ci",
              title: "Unicode, 不区分大小写",
              text: "utf16le_general_ci",
            },
          ],
        },
        {
          label: "utf32",
          title: "UTF-32 Unicode",
          options: [
            {
              label: "utf32_bin",
              title: "Unicode, 二进制",
              text: "utf32_bin",
            },
            {
              label: "utf32_croatian_ci",
              title: "克罗地亚语, 不区分大小写",
              text: "utf32_croatian_ci",
            },
            {
              label: "utf32_czech_ci",
              title: "捷克语, 不区分大小写",
              text: "utf32_czech_ci",
            },
            {
              label: "utf32_danish_ci",
              title: "丹麦语, 不区分大小写",
              text: "utf32_danish_ci",
            },
            {
              label: "utf32_esperanto_ci",
              title: "世界语, 不区分大小写",
              text: "utf32_esperanto_ci",
            },
            {
              label: "utf32_estonian_ci",
              title: "爱沙尼亚语, 不区分大小写",
              text: "utf32_estonian_ci",
            },
            {
              label: "utf32_general_ci",
              title: "Unicode, 不区分大小写",
              text: "utf32_general_ci",
            },
            {
              label: "utf32_german2_ci",
              title: "德语（电话簿排序）, 不区分大小写",
              text: "utf32_german2_ci",
            },
            {
              label: "utf32_hungarian_ci",
              title: "匈牙利语, 不区分大小写",
              text: "utf32_hungarian_ci",
            },
            {
              label: "utf32_icelandic_ci",
              title: "冰岛语, 不区分大小写",
              text: "utf32_icelandic_ci",
            },
            {
              label: "utf32_latvian_ci",
              title: "拉脱维亚语, 不区分大小写",
              text: "utf32_latvian_ci",
            },
            {
              label: "utf32_lithuanian_ci",
              title: "立陶宛语, 不区分大小写",
              text: "utf32_lithuanian_ci",
            },
            {
              label: "utf32_persian_ci",
              title: "波斯语, 不区分大小写",
              text: "utf32_persian_ci",
            },
            {
              label: "utf32_polish_ci",
              title: "波兰语, 不区分大小写",
              text: "utf32_polish_ci",
            },
            {
              label: "utf32_roman_ci",
              title: "西欧, 不区分大小写",
              text: "utf32_roman_ci",
            },
            {
              label: "utf32_romanian_ci",
              title: "罗马尼亚语, 不区分大小写",
              text: "utf32_romanian_ci",
            },
            {
              label: "utf32_sinhala_ci",
              title: "僧伽罗语, 不区分大小写",
              text: "utf32_sinhala_ci",
            },
            {
              label: "utf32_slovak_ci",
              title: "斯洛伐克语, 不区分大小写",
              text: "utf32_slovak_ci",
            },
            {
              label: "utf32_slovenian_ci",
              title: "斯洛文尼亚语, 不区分大小写",
              text: "utf32_slovenian_ci",
            },
            {
              label: "utf32_spanish2_ci",
              title: "西班牙语（传统）, 不区分大小写",
              text: "utf32_spanish2_ci",
            },
            {
              label: "utf32_spanish_ci",
              title: "西班牙语（现代）, 不区分大小写",
              text: "utf32_spanish_ci",
            },
            {
              label: "utf32_swedish_ci",
              title: "瑞典语, 不区分大小写",
              text: "utf32_swedish_ci",
            },
            {
              label: "utf32_turkish_ci",
              title: "土耳其语, 不区分大小写",
              text: "utf32_turkish_ci",
            },
            {
              label: "utf32_unicode_520_ci",
              title: "Unicode (UCA 5.2.0), 不区分大小写",
              text: "utf32_unicode_520_ci",
            },
            {
              label: "utf32_unicode_ci",
              title: "Unicode, 不区分大小写",
              text: "utf32_unicode_ci",
            },
            {
              label: "utf32_vietnamese_ci",
              title: "越南语, 不区分大小写",
              text: "utf32_vietnamese_ci",
            },
          ],
        },
        {
          label: "utf8",
          title: "UTF-8 Unicode",
          options: [
            {
              label: "utf8_bin",
              title: "Unicode, 二进制",
              text: "utf8_bin",
            },
            {
              label: "utf8_croatian_ci",
              title: "克罗地亚语, 不区分大小写",
              text: "utf8_croatian_ci",
            },
            {
              label: "utf8_czech_ci",
              title: "捷克语, 不区分大小写",
              text: "utf8_czech_ci",
            },
            {
              label: "utf8_danish_ci",
              title: "丹麦语, 不区分大小写",
              text: "utf8_danish_ci",
            },
            {
              label: "utf8_esperanto_ci",
              title: "世界语, 不区分大小写",
              text: "utf8_esperanto_ci",
            },
            {
              label: "utf8_estonian_ci",
              title: "爱沙尼亚语, 不区分大小写",
              text: "utf8_estonian_ci",
            },
            {
              label: "utf8_general_ci",
              title: "Unicode, 不区分大小写",
              text: "utf8_general_ci",
            },
            {
              label: "utf8_general_mysql500_ci",
              title: "Unicode (MySQL 5.0.0), 不区分大小写",
              text: "utf8_general_mysql500_ci",
            },
            {
              label: "utf8_german2_ci",
              title: "德语（电话簿排序）, 不区分大小写",
              text: "utf8_german2_ci",
            },
            {
              label: "utf8_hungarian_ci",
              title: "匈牙利语, 不区分大小写",
              text: "utf8_hungarian_ci",
            },
            {
              label: "utf8_icelandic_ci",
              title: "冰岛语, 不区分大小写",
              text: "utf8_icelandic_ci",
            },
            {
              label: "utf8_latvian_ci",
              title: "拉脱维亚语, 不区分大小写",
              text: "utf8_latvian_ci",
            },
            {
              label: "utf8_lithuanian_ci",
              title: "立陶宛语, 不区分大小写",
              text: "utf8_lithuanian_ci",
            },
            {
              label: "utf8_persian_ci",
              title: "波斯语, 不区分大小写",
              text: "utf8_persian_ci",
            },
            {
              label: "utf8_polish_ci",
              title: "波兰语, 不区分大小写",
              text: "utf8_polish_ci",
            },
            {
              label: "utf8_roman_ci",
              title: "西欧, 不区分大小写",
              text: "utf8_roman_ci",
            },
            {
              label: "utf8_romanian_ci",
              title: "罗马尼亚语, 不区分大小写",
              text: "utf8_romanian_ci",
            },
            {
              label: "utf8_sinhala_ci",
              title: "僧伽罗语, 不区分大小写",
              text: "utf8_sinhala_ci",
            },
            {
              label: "utf8_slovak_ci",
              title: "斯洛伐克语, 不区分大小写",
              text: "utf8_slovak_ci",
            },
            {
              label: "utf8_slovenian_ci",
              title: "斯洛文尼亚语, 不区分大小写",
              text: "utf8_slovenian_ci",
            },
            {
              label: "utf8_spanish2_ci",
              title: "西班牙语（传统）, 不区分大小写",
              text: "utf8_spanish2_ci",
            },
            {
              label: "utf8_spanish_ci",
              title: "西班牙语（现代）, 不区分大小写",
              text: "utf8_spanish_ci",
            },
            {
              label: "utf8_swedish_ci",
              title: "瑞典语, 不区分大小写",
              text: "utf8_swedish_ci",
            },
            {
              label: "utf8_turkish_ci",
              title: "土耳其语, 不区分大小写",
              text: "utf8_turkish_ci",
            },
            {
              label: "utf8_unicode_520_ci",
              title: "Unicode (UCA 5.2.0), 不区分大小写",
              text: "utf8_unicode_520_ci",
            },
            {
              label: "utf8_unicode_ci",
              title: "Unicode, 不区分大小写",
              text: "utf8_unicode_ci",
            },
            {
              label: "utf8_vietnamese_ci",
              title: "越南语, 不区分大小写",
              text: "utf8_vietnamese_ci",
            },
          ],
        },
        {
          label: "utf8mb4",
          title: "UTF-8 Unicode",
          options: [
            {
              label: "utf8mb4_bin",
              title: "Unicode (UCA 4.0.0), 二进制",
              text: "utf8mb4_bin",
            },
            {
              label: "utf8mb4_croatian_ci",
              title: "克罗地亚语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_croatian_ci",
            },
            {
              label: "utf8mb4_czech_ci",
              title: "捷克语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_czech_ci",
            },
            {
              label: "utf8mb4_danish_ci",
              title: "丹麦语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_danish_ci",
            },
            {
              label: "utf8mb4_esperanto_ci",
              title: "世界语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_esperanto_ci",
            },
            {
              label: "utf8mb4_estonian_ci",
              title: "爱沙尼亚语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_estonian_ci",
            },
            {
              label: "utf8mb4_general_ci",
              title: "Unicode (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_general_ci",
            },
            {
              label: "utf8mb4_german2_ci",
              title: "德语（电话簿排序） (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_german2_ci",
            },
            {
              label: "utf8mb4_hungarian_ci",
              title: "匈牙利语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_hungarian_ci",
            },
            {
              label: "utf8mb4_icelandic_ci",
              title: "冰岛语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_icelandic_ci",
            },
            {
              label: "utf8mb4_latvian_ci",
              title: "拉脱维亚语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_latvian_ci",
            },
            {
              label: "utf8mb4_lithuanian_ci",
              title: "立陶宛语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_lithuanian_ci",
            },
            {
              label: "utf8mb4_persian_ci",
              title: "波斯语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_persian_ci",
            },
            {
              label: "utf8mb4_polish_ci",
              title: "波兰语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_polish_ci",
            },
            {
              label: "utf8mb4_roman_ci",
              title: "西欧 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_roman_ci",
            },
            {
              label: "utf8mb4_romanian_ci",
              title: "罗马尼亚语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_romanian_ci",
            },
            {
              label: "utf8mb4_sinhala_ci",
              title: "僧伽罗语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_sinhala_ci",
            },
            {
              label: "utf8mb4_slovak_ci",
              title: "斯洛伐克语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_slovak_ci",
            },
            {
              label: "utf8mb4_slovenian_ci",
              title: "斯洛文尼亚语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_slovenian_ci",
            },
            {
              label: "utf8mb4_spanish2_ci",
              title: "西班牙语（传统） (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_spanish2_ci",
            },
            {
              label: "utf8mb4_spanish_ci",
              title: "西班牙语（现代） (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_spanish_ci",
            },
            {
              label: "utf8mb4_swedish_ci",
              title: "瑞典语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_swedish_ci",
            },
            {
              label: "utf8mb4_turkish_ci",
              title: "土耳其语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_turkish_ci",
            },
            {
              label: "utf8mb4_unicode_520_ci",
              title: "Unicode (UCA 5.2.0), 不区分大小写",
              text: "utf8mb4_unicode_520_ci",
            },
            {
              label: "utf8mb4_unicode_ci",
              title: "Unicode (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_unicode_ci",
            },
            {
              label: "utf8mb4_vietnamese_ci",
              title: "越南语 (UCA 4.0.0), 不区分大小写",
              text: "utf8mb4_vietnamese_ci",
            },
          ],
        },
      ],

      search_text: "",
      highlight_position: 0,

      disable_table_save_btn: true,
      tableSetting: {},
      old_tableSetting: {},

      tableData: [],
      old_tableData: [],
      dateTypes: ["DATE", "DATETIME", "TIMESTAMP", "YEAR"],
      defaultTableItem: [],
    };
  },

  async created() {
    this.getData();
  },
  async mounted() {
    // this.$watch("isconnect", (res) => {
    //   console.log(211221221212121,res)
    //   // console.log(11);
    //   // this.defaultAddr = JSON.parse(JSON.stringify(this.value));
    //   // this.created = true;
    //   // this.checkProvince();
    //   // this.checkCity();
    //   // this.checkArea();
    //   // this.created = false;
    // });

    if (this.content.tabType == "structure") {
      this.setSort();
    }

    let that = this;
    // this.watchKeyEvent();
    if (this.$refs.hasOwnProperty("mycode")) {
      that.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
        mode: "text/x-sql",
        indentWithTabs: true,
        smartIndent: true,
        lineNumbers: true,
        matchBrackets: true,
        //theme: theme,
        autofocus: false,
        extraKeys: { Tab: "autocomplete" }, //自定义快捷键
        // extraKeys: { Ctrl: "autocomplete" }, //自定义快捷键
        hintOptions: {
          // 这个completeSingle的作用是当只敲击了一个单个的字母时，在不打开提示框的情况下，是否认为这个字母是提示语的一部分。默认为true。

          // 如果是true，那么如果我们只输入了S，输入结束的时候会变成Select。如果为False，那么就不会这样，而是正常的和其他代码编辑器一样单个处理。

          // 所以我们将其设置为 fasle
          completeSingle: false,
          //自定义提示选项
          tables: this.tables,
          // {
          //     users: ["name", "score", "birthDate"],
          //     countries: ["name", "population", "size"],
          // },
        },
      });
      //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
      // that.editor.on("cursorActivity", function () {
      console.log(that.editor);
      // that.editor.on("focus", () => {
      that.editor.on("inputRead", function () {
        that.editor.showHint();
      });
      // });

      // that.editor.on("blur", () => {
      //   that.editor.off("change");
      // });

      var tmp = function () {
        that.editor.refresh();
      };
      setTimeout(tmp, 50);
    }
  },
  methods: {
    addTableData() {
      let that = this;
      console.log("新增一行");
      that.defaultTableItem[0].ISNEW = true;

      that.tableDetail.data.push(
        JSON.parse(JSON.stringify(that.defaultTableItem))
      );
    },
    checkSiftMounteds(sft) {
      console.log(sft);
      if (this.siftMounteds[sft.Mounted].hasOwnProperty("not_val")) {
        sft.hideLabel = true;
      } else {
        sft.hideLabel = false;
      }
    },
    deleteColumn(row) {
      console.log(row);
      row.deleteVisible = false;
      if (this.tableData.length <= 1) {
        this.$message.error(
          "请至少保留一个原始字段，如想删除所有原始字段，可先新增更新的字段再删除旧字段！"
        );
        return;
      }
      this.tableData.forEach((column, i) => {
        if (column.UUID == row.UUID) {
          delete this.tableData[i];
        }
      });
      this.structureBlur();
    },

    async deleteCol(item, trI) {
      let that = this;
      // item.delete = true;
      // that.$forceUpdate();
      console.log(item);
      if (item[0].hasOwnProperty("ISNEW") && item[0].ISNEW) {
        console.log(that.tableDetail.data, trI);
        delete that.tableDetail.data[trI];
        that.$forceUpdate();
        return;
      }

      let get_COLUMN_NAME_sql = `SELECT * FROM information_schema.\`COLUMNS\` WHERE \`TABLE_SCHEMA\` = '${that.content.data.dbITitle}' AND \`TABLE_NAME\` = '${that.content.data.tableTitle}' ORDER BY \`ORDINAL_POSITION\` ASC   `;

      let COLUMN_NAMEs_res = await that.sqlQuery(get_COLUMN_NAME_sql, false);
      console.log(get_COLUMN_NAME_sql);
      COLUMN_NAMEs_res = JSON.parse(JSON.stringify(COLUMN_NAMEs_res));

      let column_name = "";

      console.log(COLUMN_NAMEs_res);
      if (COLUMN_NAMEs_res.length > 0) {
        COLUMN_NAMEs_res.forEach((element) => {
          if (element.COLUMN_KEY == "PRI") {
            column_name = element.COLUMN_NAME;
          }
        });
      }
      console.log(column_name, COLUMN_NAMEs_res);

      let sql_text = `delete from \`${that.content.data.tableTitle}\``;

      if (column_name != "") {
        // 有主键
        let column_name_obj = that.getObj(item, "index", column_name)[0];
        console.log(column_name_obj);

        sql_text +=
          " where " +
          column_name_obj.index +
          ' ="' +
          column_name_obj.value +
          '"' +
          " ;";
      } else {
        // 无主键

        let elementOld = that.getSqlCol(item, "value", 1, " and ");

        sql_text += " where " + elementOld + " ;";

        if (elementOld.trim() == "1") {
          // 防止全表删除
          return;
        }
      }
      if (sql_text.search("where") == -1) {
        // 防止全表删除
        return;
      }

      console.log(sql_text);

      this.$confirm(
        "如无主键可能会一并删除其他数据，请谨慎操作，您确定要删除此项？",
        "删除提醒",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "确认删除",
          cancelButtonText: "放弃删除",
        }
      )
        .then(async () => {
          console.log(sql_text);

          let wquery_sql = await that.sqlQuery(sql_text);

          if (wquery_sql.status == 200) {
            that.$message.success("操作成功！");
            // Object.assign(this.$data, this.$options.data());
            that.getData();
          }

          this.getData();
        })
        .catch((action) => {
          if (action === "cancel") {
            // this.getData();
          }
        });
    },

    save_table_data() {
      let that = this;
      // 对比新结构和旧结构的区别并拼接对应的语句
      let changeTableData = [];
      this.old_tableData.forEach((item, i) => {
        let has_item = false;
        this.tableData.forEach((tItem, t_i) => {
          if (item.UUID == tItem.UUID) {
            console.log(item.UUID, tItem.COLUMN_NAME);
          }

          if (
            item.UUID == tItem.UUID &&
            JSON.stringify(item) != JSON.stringify(tItem)
          ) {
            changeTableData.push(tItem);
          }
          if (item.UUID == tItem.UUID) {
            // 找到了即为has，否则满足条件算修改
            has_item = true;
          }
        });

        if (has_item == false) {
          console.log(222);
          item.delete = true;
          changeTableData.push(item);
        }
      });
      console.log(changeTableData);
      console.log(this.old_tableData);

      // 新表直接添加到改变数据中
      this.tableData.forEach((tItem, t_i) => {
        if (tItem.ISNEW) {
          if (tItem.COLUMN_NAME) {
            changeTableData.push(tItem);
          } else {
            this.$message.error("存在空字段，已将其忽略！");
          }
          console.log(333);
        }
      });

      if (
        changeTableData.length <= 0 &&
        this.tableSetting.TABLE_NAME == this.old_tableSetting.TABLE_NAME &&
        this.tableSetting.TABLE_COMMENT ==
          this.old_tableSetting.TABLE_COMMENT &&
        this.tableSetting.TABLE_COLLATION ==
          this.old_tableSetting.TABLE_COLLATION
      ) {
        return;
      }
      console.log(changeTableData);

      // changeTableData

      if (JSON.stringify(this.tableSetting) == "{}") {
        this.$message.error("请输入表信息！");
      }
      if (!this.tableSetting.hasOwnProperty("TABLE_NAME")) {
        this.$message.error("请输入表名！");
      }

      if (!this.tableSetting.hasOwnProperty("TABLE_COLLATION")) {
        this.$message.error("请选择字符集！");
      }

      // 字符集/字符序整理
      // this.tableSetting.TABLE_COLLATION
      // 如果是创建表或者修改表时字符集有变化则

      let CHARSET = "";
      let COLLATE = "";

      if (
        !this.content.data.hasOwnProperty("tableTitle") ||
        this.tableSetting.TABLE_COLLATION !=
          this.old_tableSetting.TABLE_COLLATION
      ) {
        that.characters.forEach((v, i) => {
          if (v.hasOwnProperty("options")) {
            console.log(v.options);
            v.options.forEach((oV, oI) => {
              if (oV.label == this.tableSetting.TABLE_COLLATION) {
                CHARSET = v.label;
                COLLATE = oV.label;
              }
            });
          }
        });
      }

      //CHARSET //字符集
      // COLLATE //字符序

      //创建表
      if (!this.content.data.hasOwnProperty("tableTitle")) {
        let characterSet = ` ${CHARSET ? "CHARSET=" + CHARSET + "" : ""}  ${
          COLLATE ? "CHARSET=" + COLLATE + "" : ""
        } `;
        // 循环语句
        let PRIMARY_KEYs = [];
        let fields = [];

        changeTableData.forEach((crData, cr_i) => {
          console.log(crData);
          // if(crData)
          let length_sen =
            crData.length > 0
              ? `(${crData.length}${
                  crData.point > 0 ? "," + crData.point : ""
                })`
              : "";
          let sentence = `\`${crData.COLUMN_NAME}\` ${
            crData.DATA_TYPE || ""
          }${length_sen} ${crData.EXTRA == true ? "AUTO_INCREMENT" : ""} ${
            crData.IS_NULLABLE == true ? "NOT NULL" : ""
          } ${
            crData.COLUMN_COMMENT
              ? "COMMENT '" + crData.COLUMN_COMMENT + "'"
              : ""
          } `;
          fields.push(sentence);

          if (crData.COLUMN_KEY) {
            PRIMARY_KEYs.push(`\`${crData.COLUMN_NAME}\``);
          }
        });
        // console.log(fields);

        let create_sql = ` CREATE TABLE \`${this.tableSetting.TABLE_NAME}\`(
           
           ${fields.join(",")}

           ${
             PRIMARY_KEYs.length > 0
               ? `,PRIMARY KEY ( ${PRIMARY_KEYs.join(",")} )`
               : ""
           } 
          )ENGINE=InnoDB  ${
            this.tableSetting.TABLE_COMMENT
              ? "COMMENT='" + this.tableSetting.TABLE_COMMENT + "'"
              : ""
          } DEFAULT ${characterSet};`;
        console.log(create_sql);

        let table_create_sql_show = create_sql.replace(/\;\s+/, ";<br>");

        this.$confirm(
          "<div>" + table_create_sql_show + "</div>",
          "数据无价，请仔细核对如下语句！",
          {
            dangerouslyUseHTMLString: true,
            distinguishCancelAndClose: true,
            confirmButtonText: "确认提交",
            cancelButtonText: "放弃编辑",
          }
        )
          .then(async () => {
            console.log(create_sql);

            let wquery_sql = await that.sqlQuery(create_sql);
            console.log(wquery_sql);
            if (wquery_sql.status == 200) {
              that.$message.success("操作成功！");

              // 如果表名有变化，则更新整个软件关于这张表的连接
              if (
                this.tableSetting.TABLE_NAME != this.old_tableSetting.TABLE_NAME
              ) {
                that.content.data.tableTitle = this.tableSetting.TABLE_NAME;
                await that.$emit("change_content", that.content);
              }

              Object.assign(this.$data, this.$options.data());
              that.getData();
            } else {
              that.$message.error("操作失败！");
            }
          })
          .catch((action) => {
            if (action === "cancel") {
              // this.getData();
            }
          });
      } else if (
        JSON.stringify(this.tableSetting) !=
          JSON.stringify(this.old_tableSetting) ||
        JSON.stringify(this.tableData) != JSON.stringify(this.old_tableData)
      ) {
        let characterSet = `ALTER TABLE  \`${
          this.tableSetting.TABLE_NAME
        }\` DEFAULT ${CHARSET ? "CHARACTER set " + CHARSET + "" : ""}  ${
          COLLATE ? "COLLATE " + COLLATE + "" : ""
        } ; `;

        changeTableData.forEach((crData, cr_i) => {
          console.log(crData);
          if (!this.isObject(crData)) {
            delete changeTableData[cr_i];
          }
        });

        console.log(changeTableData);

        // 判断表名与表注释是否有修改
        // ${this.tableSetting.TABLE_NAME}
        let table_change_sql = "";
        // this.tableSetting.TABLE_COMMENT
        if (CHARSET && COLLATE) {
          table_change_sql = ` ${characterSet} `;
        }
        console.log(table_change_sql);
        if (this.tableSetting.TABLE_NAME != this.old_tableSetting.TABLE_NAME) {
          table_change_sql += `ALTER TABLE \`${this.old_tableSetting.TABLE_NAME}\` RENAME \`${this.tableSetting.TABLE_NAME}\` ; `;
        }
        if (
          this.tableSetting.TABLE_COMMENT != this.old_tableSetting.TABLE_COMMENT
        ) {
          table_change_sql += `ALTER TABLE \`${this.tableSetting.TABLE_NAME}\` comment "${this.tableSetting.TABLE_COMMENT}"  ; `;
        }

        // isObject
        changeTableData.forEach((crDataItem, crIt) => {
          let length_sen =
            crDataItem.length > 0
              ? `(${crDataItem.length}${
                  crDataItem.point > 0 ? "," + crDataItem.point : ""
                })`
              : "";
          let sentence = ` ${crDataItem.DATA_TYPE || ""}${length_sen} ${
            crDataItem.EXTRA == true ? "AUTO_INCREMENT" : ""
          } ${crDataItem.IS_NULLABLE == true ? "NOT NULL" : ""} ${
            crDataItem.COLUMN_COMMENT
              ? "COMMENT '" + crDataItem.COLUMN_COMMENT + "'"
              : ""
          } `;
          // 如果是新增则直接新增
          if (crDataItem.ISNEW == true) {
            // ALTER TABLE <表名> ADD <新字段名><数据类型>[约束条件];
            table_change_sql += `ALTER TABLE \`${this.tableSetting.TABLE_NAME}\`  ADD \`${crDataItem.COLUMN_NAME}\` ${sentence} ;`;
          }

          // 如果是删除则直接删除
          else if (crDataItem.delete == true) {
            //  ALTER TABLE table_name DROP field_name;
            table_change_sql += `  ALTER TABLE \`${this.tableSetting.TABLE_NAME}\`  DROP \`${crDataItem.COLUMN_NAME}\` ;`;
          } else {
            // 如果不是新增并且不是删除，则判断有哪些改变
            this.old_tableData.forEach((oldT, oldI) => {
              if (oldT.UUID == crDataItem.UUID) {
                table_change_sql += `  ALTER TABLE \`${this.tableSetting.TABLE_NAME}\`  CHANGE \`${oldT.COLUMN_NAME}\` \`${crDataItem.COLUMN_NAME}\` ${sentence}  ;`;
              }
            });

            // ALTER TABLE table_name CHANGE old_field_name new_field_name field_type;
          }
        });

        // if (!table_change_sql) {
        //   table_change_sql = `ALTER TABLE  \`${this.tableSetting.TABLE_NAME}\` ${characterSet}  `;
        // }
        if (!table_change_sql.trim()) {
          return;
        }
        console.log(table_change_sql);
        table_change_sql = table_change_sql
          .replace(/[\r\n]/g, " ")
          .replace(/\ +/g, " ")
          .replace(/\;\s+/, ";\n");

        let table_change_sql_show = table_change_sql.replace(/\;\s+/, ";<br>");

        this.$confirm(
          "<div>" + table_change_sql_show + "</div>",
          "数据无价，请仔细核对如下语句1！",
          {
            dangerouslyUseHTMLString: true,
            distinguishCancelAndClose: true,
            confirmButtonText: "确认提交",
            cancelButtonText: "放弃编辑",
          }
        )
          .then(async () => {
            console.log(table_change_sql);

            let wquery_sql = await that.sqlQuery(table_change_sql);
            console.log(wquery_sql);
            if (wquery_sql.status == 200) {
              that.$message.success("操作成功！");

              // 如果表名有变化，则更新整个软件关于这张表的连接
              if (
                this.tableSetting.TABLE_NAME != this.old_tableSetting.TABLE_NAME
              ) {
                that.content.data.tableTitle = this.tableSetting.TABLE_NAME;
                that.$emit("change_content", that.content);
              }

              Object.assign(this.$data, this.$options.data());
              that.getData();
            } else {
              that.$message.error("操作失败！");
            }
          })
          .catch((action) => {
            if (action === "cancel") {
              // this.getData();
            }
          });

        console.log(table_change_sql);
      }
    },
    // 判断对象是否有值
    isObject(form) {
      let flag = false;
      for (let key in form) {
        if (!form[key]) {
          return true;
        }
      }
      return flag;
    },

    /**
     * 排序方法
     */
    setSort() {
      let that = this;
      const el_bd = this.$refs.dragTable.$el.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      console.log(el_bd);

      Sortable.create(el_bd, {
        sort: true,
        animation: 300,
        onEnd({ newIndex, oldIndex }) {
          console.log(newIndex);
          console.log(oldIndex);

          that.tableData.splice(
            newIndex,
            0,
            that.tableData.splice(oldIndex, 1)[0]
          );
          var newArray = that.tableData.slice(0);

          newArray.forEach((element, e_i) => {
            if (e_i == 0) {
              element.after = 0;
            } else {
              element.after = newArray[e_i - 1].COLUMN_NAME;
            }
          });

          that.tableData = [];
          that.$nextTick(function () {
            that.tableData = newArray;
            console.log(that.tableData);
          });
        },
      });

      // this.sortable = Sortable.create(el_bd,{
      //   ghostClass:'sortable-ghost',
      //   setData:function(dataTransfer){
      //     dataTransfer.setData('Text', '')
      //     console.log(dataTransfer)

      //   },
      //   onEnd: evt => {
      //     console.log(evt)
      //     // const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
      //     // this.tableData.splice(evt.newIndex, 0, targetRow);
      //   }
      // })
    },
    structureBlur() {
      console.log(
        JSON.stringify(this.tableSetting) !=
          JSON.stringify(this.old_tableSetting) ||
          JSON.stringify(this.tableData) != JSON.stringify(this.old_tableData)
      );
      // 判断新数据和老数据是否有区别
      if (
        JSON.stringify(this.tableSetting) !=
          JSON.stringify(this.old_tableSetting) ||
        JSON.stringify(this.tableData) != JSON.stringify(this.old_tableData)
      ) {
        this.disable_table_save_btn = false;
      } else {
        this.disable_table_save_btn = true;
      }
    },
    addField() {
      let COLUMN_DEFAULT_OBJ = {
        AUTO_INCREMENT: "",
        AVG_ROW_LENGTH: "",
        CHECKSUM: "",
        CHECK_TIME: "",
        CREATE_OPTIONS: "",
        CREATE_TIME: "",
        DATA_FREE: "",
        DATA_LENGTH: "",
        ENGINE: "",
        INDEX_LENGTH: "",
        MAX_DATA_LENGTH: "",
        ROW_FORMAT: "",
        TABLE_CATALOG: "",
        TABLE_COLLATION: "",
        TABLE_COMMENT: "",
        TABLE_NAME: "",
        TABLE_ROWS: "",
        TABLE_SCHEMA: "",
        TABLE_TYPE: "",
        UPDATE_TIME: "",
        VERSION: "",
        ISNEW: true,
        deleteVisible: false,

        UUID: new Date().getTime() + "" + Math.floor(Math.random() * 1000),
      };

      this.tableData.push(COLUMN_DEFAULT_OBJ);
    },
    checkSearchText() {
      let that = this;
      that.highlight_position = 0;
      console.log(11);
      this.searchHighlight();
    },
    searchText() {
      this.searchHighlight();
      // this.tableDetail.data=this.tableDetail.data
    },

    offsetTop(elements) {
      if (!elements) {
        return 0;
      }
      var top = elements.offsetTop;
      var parent = elements.offsetParent;

      while (parent != null) {
        top += parent.offsetTop;
        parent = parent.offsetParent;
      }

      return top;
    },
    searchHighlight() {
      let that = this;
      // setTimeout(() => {
      // search_text_active
      let $ = this.$JQ;
      $(function () {
        let search_text_actives = $(".search_text_active").removeClass(
          "active"
        );
        let active_span = $(search_text_actives[that.highlight_position]);

        active_span.addClass("active");

        var context_top = that.offsetTop(active_span.get(0));

        $(".db_table").scrollTop(context_top - 250);

        console.log(that.highlight_position);
        if (that.highlight_position >= search_text_actives.length - 1) {
          that.highlight_position = 0;
        } else {
          that.highlight_position++;
        }
      });
      // }, 200);
    },

    // 搜索高亮
    showDate(val) {
      val = val + "";
      let sourceVal = val + "";
      if (
        sourceVal.toLowerCase().indexOf(this.search_text.toLowerCase()) !==
          -1 &&
        this.search_text !== ""
      ) {
        return val.replace(
          this.search_text,
          '<font class="search_text_active" >' + this.search_text + "</font>"
        );
      } else {
        return val;
      }
    },

    // 切换input框的显示状态
    switchShow(index, tag, tmp_this = this) {
      // 因为涉及到调用不同名称的变量, 不清楚怎么写, 只能先用switch case解决
      switch (tag) {
        case "tag1":
          tmp_this.tableData[index].is_show_tag1 =
            !tmp_this.tableData[index].is_show_tag1;
          break;
        case "tag2":
          tmp_this.tableData[index].is_show_tag2 =
            !tmp_this.tableData[index].is_show_tag2;
          break;
        // ...
      }
      tmp_this.tableData = [...tmp_this.tableData]; //因为我table绑定的表格数据是后接过来赋值的，所以需要这步操作，如果没有1、2步骤这个可以不加。后面也一样
    },

    // 显示input框, 使光标焦点当前input框
    changeEnddate(index, tag, rowdata) {
      this.switchShow(index, tag, this);
      // console.log('enddateinput' + index, typeof 'enddateinput' + index);
      // console.log(rowdata, typeof rowdata);
      setTimeout(() => {
        //定时器是为了避免没有获取到dom的情况报错，所以象征性的给1毫秒让他缓冲
        this.$refs["enddateinput" + tag + "&" + index].focus();
        //el-input的autofocus失效，所以用这个方法。对应在template里的refs绑定值
      }, 1);
    },
    reConn() {
      console.log(11);
      if (this.connId > 0) {
        this.$emit("reConn", this.connId);
      }
    },
    openTable(tableObj) {
      this.$emit("opentable", tableObj);
    },
    editStructure(tableObj) {
      this.$emit("editStructure", tableObj);
    },
    showSift() {
      this.showSiftFlog = !this.showSiftFlog;

      this.showOrderByFlog = false;

      if (this.showSiftFlog == true) {
        this.showMoreBox = true;
      } else {
        this.showMoreBox = false;
      }
    },
    showOrderBy() {
      this.showOrderByFlog = !this.showOrderByFlog;
      this.showSiftFlog = false;
      if (this.showOrderByFlog == true) {
        this.showMoreBox = true;
      } else {
        this.showMoreBox = false;
      }
    },
    selectBlur(e) {
      let that = this;
      var old_pageSize = this.pageSize;
      let input_pageSize = parseInt(e.target.value);
      if (input_pageSize > 10000) {
        that.$message.error(error);

        return;
      }
      this.pageSize = input_pageSize || "100";
      console.log(this.pageSize);
      if (old_pageSize != this.pageSize) {
        this.handleCurrentChange(1);
      }
    },
    // 调整分页数量
    handleSizeChange(val) {
      let that = this;
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      if (this.content.tabType == "sql") {
        that.tableDetail.data = this.tableDetail.data_bak.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
      } else {
        this.getData();
      }
    },
    // 分页跳转
    handleCurrentChange(val = 1) {
      let that = this;
      this.currentPage = val;
      console.log(`当前页: ${this.currentPage}`);
      if (this.content.tabType == "sql") {
        that.tableDetail.data = this.tableDetail.data_bak.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
      } else {
        this.getData();
      }
    },
    refresh() {
      this.$nextTick(() => {
        this.editorText.refresh();
      });
    },
    setValue(value) {
      this.cminstance.setValue(this.textarea);
      this.refresh();
    },
    /* 代码格式化*/
    format() {
      /* 获取文本编辑器内容*/
      let sqlContent = "";
      // sqlContent = this.sql_text;
      // /* 将sql内容进行格式后放入编辑器中*/
      // this.sql_text = format(sqlContent);
      // console.log( format( this.sql_text))

      sqlContent = this.editor.getValue();
      /*将sql内容进行格式后放入编辑器中*/
      this.editor.setValue(format(sqlContent, { language: "mysql" }));
    },
    compression() {
      let sqlContent = "";
      sqlContent = this.editor.getValue();

      this.editor.setValue(
        sqlContent
          .replace(/[\r\n]/g, " ")
          .replace(/\ +/g, " ")
          .replace(/\;\s+/, ";\n")
      );
    },

    refreshTable() {
      console.log(111);
      // 判断是否有变更数据，如果有提醒用户是否保存
      if (this.disable_save_btn != true) {
        this.$confirm(
          "检测到未保存的内容，是否在离开页面前保存修改？",
          "确认信息",
          {
            distinguishCancelAndClose: true,
            confirmButtonText: "保存",
            cancelButtonText: "放弃修改",
          }
        )
          .then(() => {
            this.save_data();
            this.getData();
          })
          .catch((action) => {
            if (action === "cancel") {
              this.getData();
            }
          });

        //
      } else {
        this.getData();
      }
    },
    //判断字符是否为空的方法
    isEmpty(obj) {
      if (typeof obj == "undefined" || obj == null || obj == "") {
        return true;
      } else {
        return false;
      }
    },
    async getData() {
      let that = this;
      that.disable_save_btn = true;
      if (!this.content.data.hasOwnProperty("conn") || !that.isconnect) {
        return;
      }

      that.loading = this.$loading({
        // 声明一个loading对象
        lock: true, // 是否锁屏
        text: "正在加载...", // 加载动画的文字
        spinner: "el-icon-loading", // 引入的loading图标
        background: "rgba(0, 0, 0, 0.3)", // 背景颜色
        target: ".sub-main", // 需要遮罩的区域
        body: true,
        customClass: "mask", // 遮罩层新增类名
      });

      let use_datebase_sql = `USE \`${that.content.data.dbITitle}\`;`;
      console.log(use_datebase_sql);

      let is_usedatabase = await that.sqlQuery(use_datebase_sql);
      if (!is_usedatabase) {
        that.loading.close(); // 关闭遮罩层
        return;
      }

      let dbnames_sql = `SELECT TABLE_NAME FROM information_schema.\`TABLES\` WHERE 1 and \`TABLE_SCHEMA\` = '${that.content.data.dbITitle}' ORDER BY \`TABLE_NAME\` ASC`;

      let dbnames = await that.sqlQuery(dbnames_sql);

      await dbnames.forEach(async (dbItems, dbI) => {
        let tablenames_sql = `select COLUMN_NAME from information_schema.COLUMNS where table_name = '${dbItems.TABLE_NAME}';  `;
        let tablenames = await that.sqlQuery(tablenames_sql);
        let tables = that.getCol(tablenames, "COLUMN_NAME");
        // console.log(tables)
        // dbItems.TABLE_NAME;
        this.tables[dbItems.TABLE_NAME] = tables;
      });

      let dbs = this.$utools.db.get("connObject") || false;
      if (dbs == false) {
        this.$message.error("数据库对象获取失败！");
        that.loading.close(); // 关闭遮罩层

        return;
      }
      if (this.content.tabType == "sql") {
        that.loading.close(); // 关闭遮罩层
        return;
      }
      if (this.content.tabType == "table") {
        if (!this.content.data.hasOwnProperty("conn")) {
          that.loading.close(); // 关闭遮罩层
          return;
        }

        let get_COLUMN_NAME_sql =
          // "select COLUMN_NAME,COLUMN_TYPE from information_schema.columns where table_schema = '" +
          "select COLUMN_NAME,DATA_TYPE from information_schema.columns where table_schema = '" +
          that.content.data.dbITitle +
          "' and table_name = '" +
          that.content.data.tableTitle +
          "' ";

        let COLUMN_NAMEs_res = await that.sqlQuery(get_COLUMN_NAME_sql, false);
        console.log(get_COLUMN_NAME_sql);

        console.log(COLUMN_NAMEs_res);
        let column_names = COLUMN_NAMEs_res.map((i, v) => {
          return i.COLUMN_NAME;
        });
        // 左边添加一列
        column_names.unshift("");

        // 右边添加一列
        column_names.push("操作");

        that.tableDetail.structure = column_names;
        console.log(column_names);

        // 筛选
        let siftText = "";
        this.siftList.forEach((sftV, sfti) => {
          let mounted = "";
          // 判断当前模式需要几个变量
          if (sftV.Mounted >= 0 && sftV.Mounted !== "") {
            mounted = this.siftMounteds[sftV.Mounted];
          } else {
            return;
          }

          if (mounted.hasOwnProperty("not_val")) {
            console.log(mounted);
            siftText += " and `" + sftV.cName + "` " + mounted.temp;
          } else if (mounted.hasOwnProperty("val_num")) {
            let sftV_value = sftV.Label.split(/[，,]/);

            if (mounted.val_num == -1 && sftV_value.length >= 1) {
              sftV_value.forEach((v) => {
                v = '"' + v + '"';
              });

              siftText +=
                " and `" +
                sftV.cName +
                "` " +
                mounted.temp.replace("${1}", sftV_value.join(","));
            }

            if (mounted.val_num == 2 && sftV_value.length > 1) {
              sftV_value.forEach((v) => {
                v = '"' + v + '"';
              });

              siftText +=
                " and `" +
                sftV.cName +
                "` " +
                mounted.temp
                  .replace("${1}", sftV_value[0])
                  .replace("${2}", sftV_value[1]);
            }
          } else {
            console.log(mounted.temp, sftV.Label);
            siftText +=
              " and `" +
              sftV.cName +
              "` " +
              mounted.temp.replace("${1}", sftV.Label);
          }
        });

        // 筛选结束

        // 排序
        let limitTextArr = [];
        this.orderByList.forEach((odbyV, odbi) => {
          if (!that.isEmpty(odbyV.cName)) {
            limitTextArr.push("`" + odbyV.cName + "` " + odbyV.flog);
          }
        });

        let limitText = "";
        if (limitTextArr.length > 0) {
          limitText = " order by " + limitTextArr.join(",");
        }

        // 排序结束

        let get_tabdata_sql =
          "SELECT * FROM `" +
          that.content.data.dbITitle +
          "`.`" +
          that.content.data.tableTitle +
          "` WHERE 1 " +
          siftText +
          limitText +
          " limit  " +
          (this.currentPage - 1) * this.pageSize +
          "," +
          this.pageSize;
        console.log(get_tabdata_sql);

        let tab_results = await that.sqlQuery(get_tabdata_sql).catch((res) => {
          that.loading.close(); // 关闭遮罩层
        });

        let get_tabdata_count_sql =
          "SELECT count(*) as total FROM `" +
          that.content.data.dbITitle +
          "`.`" +
          that.content.data.tableTitle +
          "` WHERE 1 ";

        let tab_count = await that.sqlQuery(get_tabdata_count_sql);
        console.log(get_tabdata_count_sql);
        that.total = tab_count[0].total;
        // that.content.data.conn.query(
        //   "SELECT * FROM " +
        //     that.content.data.dbITitle +
        //     ".`" +
        //     that.content.data.tableTitle +
        //     "` WHERE 1 limit  " +
        //     (this.currentPage - 1) * this.pageSize +
        //     "," +
        //     this.pageSize,
        //   (error, results, fields) => {

        // if (error) throw error;
        that.loading.close(); // 关闭遮罩层
        that.$set(that.tableDetail, "data", []);
        let data = [];

        let defaultTableItem = [];

        // 左边添加一列
        let ldebTableFieldItem = {
          index: 0,
          value: "",
          __showDelete: false,
          __isTag: true,
        };
        defaultTableItem.push(ldebTableFieldItem);

        COLUMN_NAMEs_res.forEach((col_d, cId) => {
          defaultTableItem.push({
            index: col_d.COLUMN_NAME,
            value: "",
            __isActive: false,
            __isEditActive: true,
          });
        });
        // 右边添加一列
        let rndbTableFieldItem = {
          index: 0,
          value: "",
          __showDelete: true,
          __isTag: false,
        };
        defaultTableItem.push(rndbTableFieldItem);
        this.defaultTableItem = defaultTableItem;

        tab_results.forEach((dbItems, dbI) => {
          // console.log(dbItems);

          let dbItems_bak = [];

          // 左边添加一列
          let dbTableFieldItem = {
            index: 0,
            value: "",
            __isActive: false,
            __isTag: true,
            __showDelete: false,
          };
          dbItems_bak.push(dbTableFieldItem);

          //   dbItems.forEach((element,i) => {
          for (let i in dbItems) {
            console.log(i);
            let FieldItem = "";
            COLUMN_NAMEs_res.forEach((col, cI) => {
              if (col.COLUMN_NAME == i) {
                if (col.DATA_TYPE.toUpperCase().in_array(this.dateTypes)) {
                  FieldItem = that.$sqlUtil.dateFormat(dbItems[i]);
                } else {
                  FieldItem = dbItems[i];
                }
              }
            });

            let dbTableFieldItem = {
              index: i,
              value: FieldItem,
              __isActive: false,
              __showDelete: false,
            };

            // console.log(dbTableFieldItem);
            dbItems_bak.push(dbTableFieldItem);
          }

          // 右边添加一列
          let ndbTableFieldItem = {
            index: 0,
            value: "",
            __showDelete: true,
            __isTag: false,
          };
          dbItems_bak.push(ndbTableFieldItem);

          // console.log(dbItems_bak);
          that.tableDetail.data.push(JSON.parse(JSON.stringify(dbItems_bak)));
        });

        // console.log(that.tableDetail.data);
        this.tableDetail.data_bak = JSON.parse(
          JSON.stringify(that.tableDetail.data)
        );

        that.$forceUpdate();
        //   }
        // );
        //   }
        // );
      } else if (this.content.tabType == "structure") {
        if (!this.content.data.hasOwnProperty("conn")) {
          that.loading.close(); // 关闭遮罩层
          return;
        }
        if (!this.content.data.hasOwnProperty("tableTitle")) {
          that.loading.close(); // 关闭遮罩层
          return;
        }

        // let use_datebase_sql = `USE ${that.content.data.dbITitle};`;
        // let column_names = await that.sqlQuery(use_datebase_sql);

        // // show create table ims_wxcard_reply
        // let sql_tab_texta = `  show create table ${that.content.data.tableTitle} `;

        // let resulta = await that.sqlQuery(sql_tab_texta);
        // console.log(resulta);
        // // type,length,decimals,notnull,virtual （虚拟）,key,comment,auto increment（自增） ,unsigned(无符合)
        // let sql_tab_text = `select * from information_schema.TABLES where table_name = '${that.content.data.tableTitle}' `;

        // let result = await that.sqlQuery(sql_tab_text);
        // console.log(result);

        // // type,length,decimals,notnull,virtual （虚拟）,key,comment,auto increment（自增） ,unsigned(无符合)
        // let sql_text = `select * from information_schema.COLUMNS where table_name = '${that.content.data.tableTitle}' `;
        // // let sql_text=`select COLUMN_NAME,DATA_TYPE,IS_NULLABLE,COLUMN_KEY,COLUMN_COMMENT,EXTRA from information_schema.COLUMNS where table_name = '${that.content.data.tableTitle}' `;
        // // let sql_text=`SHOW FULL COLUMNS FROM \`${that.content.data.tableTitle}\` `;

        // let sql_table_text = `show create table  \`${that.content.data.tableTitle}\` `;

        let sql_table_text = ` SELECT * FROM INFORMATION_SCHEMA.TABLES   WHERE TABLE_NAME = '${that.content.data.tableTitle}'  `;

        console.log(sql_table_text);

        let res_table = await that.sqlQuery(sql_table_text, false);
        console.log(res_table);

        that.old_tableSetting = JSON.parse(JSON.stringify(res_table[0]));
        that.tableSetting = JSON.parse(JSON.stringify(res_table[0]));

        let sql_text = `SELECT * FROM information_schema.\`COLUMNS\` WHERE \`TABLE_SCHEMA\` = '${that.content.data.dbITitle}' AND \`TABLE_NAME\` = '${that.content.data.tableTitle}' ORDER BY \`ORDINAL_POSITION\` ASC   `;
        let result = await that.sqlQuery(sql_text, false);
        // result= JSON.parse(JSON.stringify(result));

        result.forEach((element, e_i) => {
          element.UUID =
            new Date().getTime() +
            "" +
            (Math.floor(Math.random() * 90000) + 10000);

          if (e_i == 0) {
            element.after = 0;
          } else {
            element.after = result[e_i - 1].COLUMN_NAME;
          }
          element.ISNEW = false;
          element.deleteVisible = false;

          element.EXTRA = element.EXTRA == "auto_increment" ? true : false;
          element.COLUMN_KEY = element.COLUMN_KEY == "PRI" ? true : false;
          element.IS_NULLABLE = element.IS_NULLABLE == "YES" ? true : false;

          if (
            !element.COLUMN_DEFAULT &&
            typeof element.COLUMN_DEFAULT != "undefined" &&
            element.COLUMN_DEFAULT != 0
          ) {
            element.COLUMN_DEFAULT_NULL = true;
          } else {
            element.COLUMN_DEFAULT_NULL = false;
          }

          element.DATA_TYPE = element.DATA_TYPE.toUpperCase();
          // 长度

          var resultType = element.COLUMN_TYPE.match(/\(([^)]*)\)/);
          // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
          if (resultType) {
            if (!isNaN(resultType[1])) {
              element.length = resultType[1];
            } else if (resultType[1] != "") {
              let c_types = resultType[1].split(",");
              element.length = c_types[0];
              element.point = c_types[1];
            }
          }

          // element.length=
          //  element.point

          // element.EXTRA
        });
        that.old_tableData = JSON.parse(JSON.stringify(result));
        that.tableData = JSON.parse(JSON.stringify(result));

        let tableDataMap = that.tableData.map((x) => {
          return x.UUID;
        });
        let old_tableDataMap = that.old_tableData.map((x) => {
          return x.UUID;
        });

        console.log(tableDataMap);
        console.log(old_tableDataMap);

        that.loading.close(); // 关闭遮罩层
        that.highlight_position = 0;
      }
    },

    addSiftList() {
      let od_by = {
        cName: "",
        Mounted: "",
        Label: "",
        hideLabel: false,
      };
      this.siftList.push(od_by);
    },
    clearSiftList() {
      this.siftList = [];
    },

    addOrderByList() {
      let od_by = {
        cName: "",
        flog: "asc",
      };
      this.orderByList.push(od_by);
    },
    clearOrderByList() {
      this.orderByList = [];
    },
    async runSql() {
      let that = this;
      this.tableDetail.data_bak = [];

      console.log(that.content.data.dbITitle);
      let sqlContent = this.editor.getValue();

      if (!that.content.data.hasOwnProperty("conn")) {
        return;
      }
      console.log(that.content.data.conn);
      console.log(`USE ${that.content.data.dbITitle} ; ` + sqlContent);

      let use_db_sql = `USE \`${that.content.data.dbITitle}\`;`;
      await that.sqlQuery(use_db_sql);

      that.tableDetail.structure = {};

      let results = await that.sqlQuery(sqlContent, false);
      that.$set(that.tableDetail, "data", []);
      let data = [];
      let dbItems_bak = [];
      if (results.hasOwnProperty("message")) {
        let dbTableFieldItem = {
          index: 0,
          value: results.message,
          __isActive: false,
        };
        dbItems_bak.push(dbTableFieldItem);
      } else {
        results.forEach((dbItems, dbI) => {
          // console.log(dbItems);

          if (JSON.stringify(that.tableDetail.structure) == "{}") {
            that.tableDetail.structure = Object.keys(dbItems);
          }
          console.log(that.tableDetail.structure);

          //   dbItems.forEach((element,i) => {
          for (let i in dbItems) {
            let FieldItem = dbItems[i];
            let dbTableFieldItem = {
              index: i,
              value: FieldItem,
              __isActive: false,
            };
            dbItems_bak.push(dbTableFieldItem);
          }
          console.log(dbItems_bak);
          // that.tableDetail.data.push(JSON.parse(JSON.stringify(dbItems_bak)));
          this.tableDetail.data_bak.push(
            JSON.parse(JSON.stringify(dbItems_bak))
          );
        });
      }

      // this.tableDetail.data_bak = JSON.parse(
      //   JSON.stringify(that.tableDetail.data)
      // );

      // // 开始行数
      // (this.currentPage-1)*this.pageSize;
      // // 结束行数
      // this.currentPage*this.pageSize;
      that.tableDetail.data = this.tableDetail.data_bak.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
      console.log(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize,
        this.tableDetail.data_bak
      );

      this.total = this.tableDetail.data_bak.length;
      console.log(that.tableDetail.data);

      that.$forceUpdate();
    },
    // 二维数组按值取对象
    getObj(matrix, col, val) {
      var column = [];
      if (matrix instanceof Array) {
        for (var i = 0; i < matrix.length; i++) {
          if (matrix[i][col] == val) {
            column.push(matrix[i]);
          }
        }
      }

      return column;
    },
    // 二维数组取列
    getCol(matrix, col) {
      var column = [];
      if (matrix instanceof Array) {
        for (var i = 0; i < matrix.length; i++) {
          column.push(matrix[i][col]);
        }
      }
      if (matrix instanceof Object) {
        for (const key in matrix) {
          if (Object.hasOwnProperty.call(matrix, key)) {
            const element = matrix[key];
          }
        }
      }
      return column;
    },
    // 二维对象取列转为新对象拼接sql
    // is_str 1 where 2 toString(添加引号)  3为· （加sql关键字区分符号）
    getSqlCol(matrix, col, is_str = 1, join_flag = ",") {
      var column = [];

      if (matrix instanceof Object) {
        for (const key in matrix) {
          if (Object.hasOwnProperty.call(matrix, key)) {
            const element = matrix[key];
            console.log(element);
            if (element["index"] == 0) {
              continue;
            }
            if (is_str == 1) {
              if (
                !element[col] &&
                typeof element[col] != "undefined" &&
                element[col] != 0
              ) {
                column.push(`\`${element["index"]}\` is ${element[col]}`);
              } else {
                column.push(`\`${element["index"]}\` ='${element[col]}'`);
              }
            } else if (is_str == 2) {
              column.push('"' + element[col] + '"');
            } else if (is_str == 3) {
              column.push("`" + element[col] + "`");
            } else {
              column.push(element[col]);
            }
          }
        }
      }
      if (is_str) {
        column = column.join(join_flag);
      }
      return column;
    },
    sqlQuery(sql_text, return_status = true) {
      let that = this;
      // console.log(that.content.data.conn);
      return new Promise((resolve, reject) => {
        that.content.data.conn.query(sql_text, (error, results, fields) => {
          if (error) {
            that.$message.error(error);
            // throw error;
            reject(error);
          }
          if (return_status) {
            results.status = 200;
          }
          resolve(results);
          // console.log(results[0].column_name);
          // column_name = results[0].column_name;
        });
      });
    },
    async save_data() {
      let that = this;
      let tableEditDatas = this.tableEditDatas;

      let use_datebase_sql = `USE \`${that.content.data.dbITitle}\`;`;
      let column_names = await that.sqlQuery(use_datebase_sql);
      // 切换库，执行成功即可
      // console.log(column_names)

      // that.content.data.conn.query(
      //     `USE ${that.content.data.dbITitle};`,

      //     (error, results, fields) => {

      let get_COLUMN_NAME_sql = `SELECT * FROM information_schema.\`COLUMNS\` WHERE \`TABLE_SCHEMA\` = '${that.content.data.dbITitle}' AND \`TABLE_NAME\` = '${that.content.data.tableTitle}' ORDER BY \`ORDINAL_POSITION\` ASC   `;

      let COLUMN_NAMEs_res = await that.sqlQuery(get_COLUMN_NAME_sql, false);
      console.log(get_COLUMN_NAME_sql);
      COLUMN_NAMEs_res = JSON.parse(JSON.stringify(COLUMN_NAMEs_res));

      let column_name = "";

      console.log(COLUMN_NAMEs_res);
      if (COLUMN_NAMEs_res.length > 0) {
        COLUMN_NAMEs_res.forEach((element) => {
          if (element.COLUMN_KEY == "PRI") {
            column_name = element.COLUMN_NAME;
          }
        });
      }
      console.log(column_name, COLUMN_NAMEs_res);

      // 根据修改的数据进行拼接sql
      let sql_text = "";
      for (const tr_i in tableEditDatas) {
        if (Object.hasOwnProperty.call(tableEditDatas, tr_i)) {
          // 修改前去掉相同的
          let newDataDiff = [];
          for (const td_i in tableEditDatas[tr_i].newData) {
            if (
              Object.hasOwnProperty.call(tableEditDatas[tr_i].newData, td_i)
            ) {
              console.log(tableEditDatas);

              if (
                !tableEditDatas.hasOwnProperty(tr_i) ||
                !tableEditDatas[tr_i].hasOwnProperty("oldData") ||
                !tableEditDatas[tr_i].oldData.hasOwnProperty(td_i) ||
                tableEditDatas[tr_i].newData[td_i].value !=
                  tableEditDatas[tr_i].oldData[td_i].value
              ) {
                newDataDiff.push(tableEditDatas[tr_i].newData[td_i]);
                console.log(newDataDiff[tr_i]);
              }
            }
          }

          if (tableEditDatas[tr_i].hasOwnProperty("oldData")) {
            //有旧数据即为修改
            const elementOld = that.getSqlCol(
              tableEditDatas[tr_i].oldData,
              "value",
              1,
              " and "
            );
            const elementNew = that.getSqlCol(newDataDiff, "value", 1);

            sql_text +=
              "UPDATE `" + that.content.data.tableTitle + "` set " + elementNew;

            if (column_name != "") {
              // 无主键
              console.log(tableEditDatas[tr_i].oldData);
              let column_name_obj = that.getObj(
                tableEditDatas[tr_i].oldData,
                "index",
                column_name
              )[0];
              console.log(column_name_obj);

              sql_text +=
                " where " +
                column_name_obj.index +
                ' ="' +
                column_name_obj.value +
                '"' +
                " ;";
            } else {
              // 有主键
              sql_text += " where " + elementOld + " ;";
            }
          } else {
            console.log(tableEditDatas[tr_i].newData);
            let COLUMN_NAMEs = that.getSqlCol(
              COLUMN_NAMEs_res,
              "COLUMN_NAME",
              3
            );

            const elementNew = that.getSqlCol(
              tableEditDatas[tr_i].newData,
              "value",
              2
            );

            console.log(elementNew);

            sql_text +=
              "INSERT INTO  `" +
              that.content.data.tableTitle +
              "`  (" +
              COLUMN_NAMEs +
              ")  value (" +
              elementNew +
              ") ;";
          }
        }
      }

      console.log(sql_text);
      // return;
      if (column_name != "") {
        let query_sql = await that.sqlQuery(sql_text);

        if (query_sql.status == 200) {
          that.$message.success("操作成功！");
          // Object.assign(this.$data, this.$options.data());
          that.getData();
        }
      } else {
        this.$confirm(
          "检测到该表不存在主键，将使用所有字段键值作为条件（如果有多条相同的数据，可能会造成数据错乱），您执意如此？",
          "数据无价",
          {
            distinguishCancelAndClose: true,
            confirmButtonText: "确认修改",
            cancelButtonText: "放弃修改",
          }
        )
          .then(async () => {
            console.log(sql_text);

            let wquery_sql = await that.sqlQuery(sql_text);

            if (wquery_sql.status == 200) {
              that.$message.success("操作成功！");
              // Object.assign(this.$data, this.$options.data());
              that.getData();
            }

            this.getData();
          })
          .catch((action) => {
            if (action === "cancel") {
              this.getData();
            }
          });
      }

      //     }
      // );
    },
    watchKeyEvent() {
      const setKeyStatus = (keyCode, status) => {
        console.log(keyCode);
        switch (keyCode) {
          case "16":
            if (this.onShfit === status) return;
            console.log("shif", status ? "按下" : "抬起");
            this.onShfit = status;
            break;
          case "Control":
            if (this.onCtrl === status) return;
            console.log("ctrl", status ? "按下" : "抬起");
            this.onCtrl = status;
            break;
        }
      };
      document.onkeydown = (e) => {
        var x = document.activeElement;
        console.log(x, 1);

        setKeyStatus(e.key, true);
      };
      document.onkeyup = (e) => {
        setKeyStatus(e.key, false);
      };
    },
    blurTd(trI, tdI) {
      let that = this;
      let tableEdits = this.tableEdits;
      let tableEditDatas = this.tableEditDatas;
      let tableData = this.tableDetail.data;
      let tableData_bak = this.tableDetail.data_bak;
      console.log(tableData_bak);
      for (const tr_i in tableEditDatas) {
        if (Object.hasOwnProperty.call(tableEditDatas, tr_i)) {
          const item = tableEditDatas[tr_i].newData;
          let new_data_flog = false;
          for (const td_i in item) {
            if (Object.hasOwnProperty.call(item, td_i)) {
              const td_item = item[td_i];
              if (
                !tableData_bak.hasOwnProperty(tr_i) ||
                !tableData_bak[tr_i].hasOwnProperty(td_i) ||
                tableData_bak[tr_i][td_i].value != td_item.value
              ) {
                new_data_flog = true;
              }
            }
          }
          // 如果全都是相同的则删除这一行
          if (!new_data_flog) {
            delete tableEditDatas[tr_i];
          }
        }
      }

      // 如果旧数据中不存在这个字段或者新旧字段不相同则视为修改
      if (
        !tableData_bak.hasOwnProperty(trI) ||
        !tableData_bak[trI].hasOwnProperty(tdI) ||
        tableData[trI][tdI].value != tableData_bak[trI][tdI].value
      ) {
        tableEditDatas[trI] = {};
        tableEditDatas[trI].newData = tableData[trI];

        if (tableData_bak.hasOwnProperty(trI)) {
          tableEditDatas[trI].oldData = tableData_bak[trI];
        }

        tableData[trI][tdI].__isEditActive = true;
      } else {
        tableData[trI][tdI].__isEditActive = false;
      }

      console.log(tableEditDatas);
      tableData[trI][tdI].__edit = false;
      tableEdits.length = 0;

      if (JSON.stringify(tableEditDatas) == "{}") {
        that.disable_save_btn = true;
      } else {
        that.disable_save_btn = false;
      }

      that.$forceUpdate();
    },
    dblclickTd(trI, tdI) {
      let that = this;
      let tableEdits = this.tableEdits;
      let tableData = this.tableDetail.data;
      console.log(trI, tdI);
      this.tableMousedown = true;
      this.coordinatesTable.x = trI;
      this.coordinatesTable.y = tdI;

      console.log(tableEdits);
      tableEdits.forEach((tAcItem, tAcI) => {
        tableData[tAcItem.trI][tAcItem.tdI].__edit = false;
      });

      tableData[trI][tdI].__edit = true;

      // tableEdits = [];
      tableEdits.length = 0;
      tableEdits.push({
        trI: trI,
        tdI: tdI,
      });

      // that.$nextTick(() => {
      //   that.$refs["tb_data_td_" + trI + "_" + tdI].focus();
      // });
      that.$forceUpdate();
    },
    tableMoveStart(trI, tdI) {
      let tableActives = this.tableActives;
      let tableData = this.tableDetail.data;
      console.log(trI, tdI);
      this.tableMousedown = true;
      this.coordinatesTable.x = trI;
      this.coordinatesTable.y = tdI;

      // 先清屏
      //   tableData.forEach((trItem, trForI) => {
      //     trItem.forEach((tdItem, tdForI) => {
      //       console.log(tdForI, tdItem);
      //       tableData[trForI][tdForI].__isActive = false;
      //     });
      //   });

      tableActives.forEach((tAcItem, tAcI) => {
        tableData[tAcItem.trI][tAcItem.tdI].__isActive = false;
      });
      tableActives = [];

      tableData[trI][tdI].__isActive = true;
      tableActives.push({
        trI: trI,
        tdI: tdI,
      });
    },
    tableMoveOver(trI, tdI) {
      let tableData = this.tableDetail.data;
      let tableActives = this.tableActives;
      if (
        (this.coordinatesTable.x < 0 && this.coordinatesTable.y < 0) ||
        this.tableMousedown != true
      ) {
        return;
      }
      // 鼠标经过的点
      this.throughCoordinate.x = trI;
      this.throughCoordinate.y = tdI;
      // 判断库框选区域
      if (this.throughCoordinate.x < this.coordinatesTable.x) {
        this.minX = this.throughCoordinate.x;
        this.maxX = this.coordinatesTable.x;
      } else {
        this.minX = this.coordinatesTable.x;
        this.maxX = this.throughCoordinate.x;
      }
      if (this.throughCoordinate.y < this.coordinatesTable.y) {
        this.minY = this.throughCoordinate.y;
        this.maxY = this.coordinatesTable.y;
      } else {
        this.minY = this.coordinatesTable.y;
        this.maxY = this.throughCoordinate.y;
      }
      // 先清屏
      //   tableData.forEach((trItem, trI) => {
      //     console.log(trI, trItem);
      //     trItem.forEach((tdItem, tdI) => {
      //       console.log(tdI, tdItem);
      //       tableData[trI][tdI].__isActive = false;
      //     });
      //   });
      tableActives.forEach((tAcItem, tAcI) => {
        tableData[tAcItem.trI][tAcItem.tdI].__isActive = false;
      });
      this.$set(this.tableActives, []);
      //   tableActives = [];

      console.log(this.minX, this.minY, this.maxX, this.maxY);
      for (let forX = this.minX; forX <= this.maxX; forX++) {
        console.log(forX, "forX");
        for (let forY = this.minY; forY <= this.maxY; forY++) {
          console.log(forX, forY, "bb");
          tableData[forX][forY].__isActive = true;
          tableActives.push({
            trI: forX,
            tdI: forY,
          });
        }
      }
      console.log(tableActives);
      console.log(trI, tdI, "aaa");
    },
    tableMoveUp(trI, tdI) {
      console.log(trI, tdI);

      setTimeout(() => {
        console.log(new Date());
        this.tableMousedown = false;
      }, 50);
    },
    cancelActive() {
      var that = this;
      console.log(this.tableMousedown);
      if (that.tableMousedown == true) {
        return;
      }
      console.log(new Date());

      that.coordinatesTable = JSON.parse(JSON.stringify({ x: -1, y: -1 }));
      that.throughCoordinate = JSON.parse(JSON.stringify({ x: -1, y: -1 }));
      that.tableData.forEach((trItem, trI) => {
        console.log(trI, trItem);
        trItem.forEach((tdItem, tdI) => {
          console.log(tdI, tdItem);
          that.tableData[trI][tdI].__isActive = false;
        });
      });
    },
  },
};
</script>
